<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. Eclipse配置Maven的本地仓库和阿里云镜像 加速Maven更新

    先确定自己电脑是否安装了Maven和安装位置,具体查询方法直接win+R键打开运行窗口,输入cmd打开dos窗口,再输入mvn -v即可查询安装的位置 拿到安装位置 D:\Applications\W ...

  2. 用 Portainer 远程管理 docker

    参考的官网地址为:https://portainer.readthedocs.io/en/stable/deployment.html 先更新Centos docker 镜像加速地址: curl -s ...

  3. 天线basic

    1.实际应用时,按内置天线还是外置天线考虑. 内置时,净空区在 PCB 上所有层(all layer) 不能放置元件,走线和铺 GND  天线远离金属,至少要距离周围有较高的元器件 10 毫米以上: ...

  4. Tomcat 7 简单定制

    Tomcat笔记 安装 wget https://mirrors.huaweicloud.com/apache/tomcat/tomcat-7/v7.0.96/bin/apache-tomcat-7. ...

  5. 数据库——Oracle(2)

    1 插入语句(insert): 1) 往表中所有的列值都插入列值 SQL> desc person2; 名称 ID NAME 案例:往person2表中任意的插入3条数据 insert into ...

  6. Ubuntu18.04安装破解版MATLAB2018b

    参考链接: Ubuntu 18.04安装破解Matlab 2018b及创建快捷方式的详细教程(附图) Linux下安装JDK遇到的问题之cp: 无法获取"jdk-8u191-linux-i5 ...

  7. Jmeter:非 GUI 命令行执行脚本文件

    介绍 进行性能测试时,Jmeter 官方文档声明是不建议在 GUI 执行的,此时需要用到命令行. 第一步:环境配置 把 Jmeter安装目录\bin 添加到 系统环境变量path 第二步:命令参数 - ...

  8. @Mapper和@Repository

    参考地址 https://www.cnblogs.com/jtfr/p/10962205.html 相同点 两者都是作用于dao上 不同点 @Repository需要在Spring中配置扫描地址,然后 ...

  9. windows下基于IIS配置ssl证书遇到的坑

    前几天配置windows下基于IIS配置ssl证书 完全按照步骤执行 绑定https网址后,一直显示:无法访问此网站 检查了443端口,还有防火墙限制,没发现什么 足足困扰了我好几天 后来突然想到前不 ...

  10. 微信退款SpringBoot读取resource下的证书

    微信支付退款接口,需要证书双向验证,测试的时候证书暂时放在resource下,上图 起初MyConfig中我是这样,在本机IDE中运行没有问题 但到Linux服务器的docker中运行就IO异常了,查 ...