<!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属性切换
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
