实现个切换
其实就是翻译了jQuery的removeClass和addClass,只是在Vue里面使用了变量去切换.
运行效果
源码
源码比较简单,引用了bootcss的cdn服务.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>首页</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <style> .Grid { display: flex; } .Grid-cell { flex: 1; text-align: center; } .bottomActive{ background-color: #00ff00; } .Grid .Grid-cell { padding:5px; cursor: pointer; } </style> </head> <body> <div id="app"> <div class="Grid"> <div :class="[[{'bottomActive':1==bottomactive},'Grid-cell']]" @click="bottomMenuClick(1)"> <div>第一个</div> </div> <div :class="[{'bottomActive':2==bottomactive},'Grid-cell']" @click="bottomMenuClick(2)"> <div>第二个</div> </div> <div :class="[{'bottomActive':3==bottomactive},'Grid-cell']" @click="bottomMenuClick(3)"> <div>第三个</div> </div> </div> </div> <script> var vue = new Vue({ el:"#app", data:{ bottomactive:1 }, methods:{ bottomMenuClick:function(index){ console.log("index:"+index); this.bottomactive=index; } } }) </script> </body> </html>