<template>
<div class="stock">
<div class="buin_leftcont nav_ctrl">
<ul class="buin_leftnav">
<template v-for="(item, index) in menu_list">
<router-link :to="item.urls">
<li @click="show_ctrl(index)" :class="{'active':index===isActive}">
<span>{{item.name}}</span>
</li>
</router-link>
</template>
</ul>
</div>
<div class='stock_router'>
<router-view></router-view>
</div>
</div>
</template> <script>
import $ from 'jquery'
export default {
name: 'stock',
data () {
return {
isActive:'',
menu_list:[
{name:'阀门管理',urls:'/Stock/Fm_manage', show: false},
{name:'工具管理',urls:'/Stock/Fm_manage', show: false},
{name:'执行器管理',urls:'/Stock/Fm_manage', show: false},
{name:'研磨设备管理',urls:'/Stock/Fm_manage', show: false},
{name:'加工设备管理',urls:'/Stock/Fm_manage', show: false},
{name:'检测设备管理',urls:'/Stock/Fm_manage', show: false},
{name:'人才信息管理',urls:'/Stock/Fm_manage', show: false},
]
}
},
mounted(){
},
methods:{
show_ctrl(index){
this.isActive=index;
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.stock{
display: flex;
}
.buin_leftnav{
display: flex;
flex-direction:column;
width: 246px;
margin-top: 10px;
margin-left: 10px;
}
.stock_router{
width: 90%;
flex-grow:2
}
.nav_ctrl ul{
background:#1999D7;
width:200px;
} .nav_ctrl li{
height:30px;
line-height:30px;
vertical-align:middle;
padding:10px 10px;
color:#FFF;
font-family:"微软雅黑","幼圆",Arial, sans-serif;
font-size:20px;
font-weight:500;
text-align:center;
cursor:pointer;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
} .nav_ctrl li:hover{
background:#FF9000;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
}
.active{
background:#FF9000;
/*-webkit-transform:scale(1.1);*/
/*-moz-transform:scale(1.1);*/
/*-o-transform:scale(1.1);*/
}
</style>

关键部分的截图

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

  1. Vue.js 动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新 ...

  2. vue.js动态绑定input的checked

    不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中. 其实原理是这样的,复选框里只要有checked ...

  3. 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云 ...

  4. 使用 Flask 和 Vue.js 来构建全栈单页应用

    在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来. 简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的. 但在实际中存在一个明显的问题就是 Fla ...

  5. vue.js实战——升级版购物车

    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

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

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  7. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

  8. 利用Vue.js实现拼图游戏

    之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...

  9. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

随机推荐

  1. mysql 设置服务器的MySQL允许远程访问/外网访问

    设置服务器的MySQL允许远程访问/外网访问 https://blog.csdn.net/weixin_34232363/article/details/85889037

  2. mysql调优——数据包大小限制max_allowed_packet

     mysql根据配置文件会限制server接受的数据包大小. 有时候大的插入和更新会受max_allowed_packet 参数限制,导致写入或者更新失败. 查看目前配置 show VARIABLES ...

  3. 学习使用C语言实现线性表

    线性表是最常用且最简单的一种数据结构.一个线性表是n个数据元素的有限序列,序列中的每个数据元素,可以是一个数字,可以是一个字符,也可以是复杂的结 构体或对象.例如:1,2,3,4,5是一个线性表,A, ...

  4. 异步IO框架:asyncio 中篇

    上一节我们首先介绍了,如何创建一个协程对象.主要有两种方法 通过async关键字, 通过@asyncio.coroutine 装饰函数. 然后有了协程对象,就需要一个事件循环容器来运行我们的协程.其主 ...

  5. wcPro--WordCount扩展

    Github:https://github.com/whoNamedCody/wcPro PSP表格 PSP2.1 PSP阶段 预估耗时 (分钟) 实际耗时 (分钟) Planning 计划     ...

  6. ogg中断处理

    ogg因为网络问题导致中断无法启动,需要重新抽取数据: --前滚抽取进程生成新的trail文件 alter extract ext147 etrollover alter ext147 extseqn ...

  7. ubuntu16下安装MySQLdb

    2016年07月20日 10:37:04 tonydandelion2014 阅读数 3354更多 分类专栏: Python   1.使用pip安装 pip install mysql-python ...

  8. Python之threading模块的使用

    作用:同一个进程空间并发运行多个操作,专业术语简称为:[多线程] 1.任务函数不带参数多线程 #!/usr/bin/env python # -*- coding: utf-8 -*- import ...

  9. mysql优化(下)

    优化SQL语句:(1)不要使用   select  *(2)尽量在where字段上添加索引:(3)模糊查询中%前置不能使用索引,比如  like ‘%a’;(4)使用or语句时,两侧语句都有索引时才使 ...

  10. 【Python之路】特别篇--五句话搞定JavaScript作用域

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...