vue.js-动态绑定class 利用index实现导航

 1 <template>
 2     <div class="stock">
 3         <div class="buin_leftcont nav_ctrl">
 4             <ul class="buin_leftnav">
 5                 <template  v-for="(item, index) in menu_list">
 6                     <router-link :to="item.urls">
 7                         <li @click="show_ctrl(index)" :class="{‘active‘:index===isActive}">
 8                             <span>{{item.name}}</span>
 9                         </li>
10                     </router-link>
11                 </template>
12             </ul>
13         </div>
14         <div class=‘stock_router‘>
15             <router-view></router-view>
16         </div>
17     </div>
18 </template>
19
20 <script>
21     import  $ from ‘jquery‘
22     export default {
23         name: ‘stock‘,
24         data () {
25             return {
26                 isActive:‘‘,
27                 menu_list:[
28                     {name:‘阀门管理‘,urls:‘/Stock/Fm_manage‘, show: false},
29                     {name:‘工具管理‘,urls:‘/Stock/Fm_manage‘, show: false},
30                     {name:‘执行器管理‘,urls:‘/Stock/Fm_manage‘, show: false},
31                     {name:‘研磨设备管理‘,urls:‘/Stock/Fm_manage‘, show: false},
32                     {name:‘加工设备管理‘,urls:‘/Stock/Fm_manage‘, show: false},
33                     {name:‘检测设备管理‘,urls:‘/Stock/Fm_manage‘, show: false},
34                     {name:‘人才信息管理‘,urls:‘/Stock/Fm_manage‘, show: false},
35                 ]
36             }
37         },
38         mounted(){
39         },
40         methods:{
41             show_ctrl(index){
42                 this.isActive=index;
43             }
44         }
45     }
46 </script>
47
48 <!-- Add "scoped" attribute to limit CSS to this component only -->
49 <style scoped>
50     .stock{
51         display: flex;
52     }
53     .buin_leftnav{
54         display: flex;
55         flex-direction:column;
56         width: 246px;
57         margin-top: 10px;
58         margin-left: 10px;
59     }
60     .stock_router{
61         width: 90%;
62         flex-grow:2
63     }
64     .nav_ctrl ul{
65         background:#1999D7;
66         width:200px;
67     }
68
69     .nav_ctrl li{
70         height:30px;
71         line-height:30px;
72         vertical-align:middle;
73         padding:10px 10px;
74         color:#FFF;
75         font-family:"微软雅黑","幼圆",Arial, sans-serif;
76         font-size:20px;
77         font-weight:500;
78         text-align:center;
79         cursor:pointer;
80         -webkit-transition: all 0.4s ease-in-out;
81         -moz-transition: all 0.4s ease-in-out;
82         -o-transition: all 0.4s ease-in-out;
83     }
84
85     .nav_ctrl li:hover{
86         background:#FF9000;
87         -webkit-transform:scale(1.1);
88         -moz-transform:scale(1.1);
89         -o-transform:scale(1.1);
90     }
91     .active{
92         background:#FF9000;
93         /*-webkit-transform:scale(1.1);*/
94         /*-moz-transform:scale(1.1);*/
95         /*-o-transform:scale(1.1);*/
96     }
97 </style>

关键部分的截图

时间: 2024-11-07 03:03:09

vue.js-动态绑定class 利用index实现导航的相关文章

Vue.js 动态绑定class

Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: 2.动态绑定class vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变

vue.js实战——购物车练习(包含全选功能)

vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

用 Vue.js + Firebase 製作即時聊天功能

這幾天在練習用vue & firebase刻一個仿line即時同步聊天的功能,直接初體驗vue.js + firebase + webpack三種願望一次滿足XD! update: 20170923更新[用 Vue.js + Firebase 製作即時聊天功能(2) - storage](https://guahsu.io/2017/09/vue-firebase-realtime-line-chat-2-storage/) >DEMO< >原始碼-GitHub< 這幾天想

利用Vue.js实现拼图游戏

之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5516065.html 前言 为了进一步让大家了解Vue.js的神奇魅力,了解Vue.js的一种以数据为驱动的理念,本文主要利用Vue实现了一个数字拼图游戏,其原理并不是很复杂,效果图如下: demo展示地址为:https://luozhihao.github.io/vue-puzzle/index.html

【前端】vue.js实现按钮的动态绑定

vue.js实现按钮的动态绑定 实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

vue初级页面 tab切换 表格动态绑定 v-for(item,index) in datas.system :value=&#39;item.values&#39;

<?php /** * Created by PhpStorm. * User: 信息部 * Date: 2017/10/26 * Time: 13:10 */ use PSI\assets\VueAsset; VueAsset::register($this); $this->title='角色添加'; ?> <style> .labels{ vertical-align:middle; margin:0; display:inline-block; height:100%

web前端利用vue.js实现品牌列表的添加,删除与筛选功能

实现效果图: 实现功能:web前端利用vue.js实现品牌列表的添加,删除与筛选功能 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

包学会之浅入浅出Vue.js:升学篇

上一篇<包学会之浅入浅出Vue.js:开学篇>中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧,Go~ 需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用,调用方法只需直接写上<qui-button></qui-button>或者<qui-nav></qui-nav>这样的代码就可以,是不是很方便呢,接下来我们将要完成以下页面: 这是我们组件库的首页,包含三个子

Vue.js小案例(1)

数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message"/> </div> <script> // 这是我们的Model n