vue tab 切换

来源：互联网发布：汽车上哪里用单片机编辑：程序博客网时间：2024/05/22 04:26

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script><style>*{margin:0;padding: 0;}.wrap{width:100%;}.wrap .nav{width:1200px;background: #c1c1c1;height:50px;margin:0 auto}.active{background:#fff;color:red;font-weight: bold;}.wrap .nav li{margin-left:230px;display: inline-block;line-height: 50px;padding:0 10px;cursor: pointer;}.div1{width:1200px;height:400px;background: yellow;margin:0 auto;margin-top:20px}.div2{width:1200px;height:400px;background: pink;margin:0 auto;margin-top:20px}.div3{width:1200px;height:400px;background: purple;margin:0 auto;margin-top:20px}</style></head><body><div id="total" class="wrap"><ul class="nav"><li @click="change(1)" v-bind:class="flag==1?'active' : ''">三角形</li><li @click="change(2)" v-bind:class="flag==2?'active' : ''">图片轮播</li><li @click="change(3)" v-bind:class="flag==3?'active' : ''">下拉菜单</li></ul><div class="div1" v-if="flag==1"></div><div class="div2" v-if="flag==2"></div><div class="div3" v-if="flag==3"></div></div><script>new Vue({ el:'#total', data:{ flag:1, }, methods:{ change:function(a){ this.flag=a; } }})</script></body></html>

vue高效导航切换以及class属性切换

阅读全文

0 0