Vue选项卡

作为一名奔跑在成为大牛路上的菜鸟，写的东西可能会有些不足，各位看官还请原谅则个，提出宝贵的建议，小生不胜感激

首先是代码布局部分

<div id="main">
    <nav>
        <a v-for="(i,index) in items" :class="{'show':i.active}" @click="markActive(i,index)">{{i.name}}</a>
    </nav>
    <b>{{chose}}</b>
</div>
这部分我就不多说，相信很多像我这样的初学者对布局也没什么很大的问题了


接下来就到了干货阶段了
<script>
//首先我们的new一个对象
new Vue({
　　el:"#main",
data:{
　　chose:"HTML"，　items:[

　　　　{name:"HTML",active:true},
　　　　{name:"CSS",active:false},
　　　　{name:"Javascript",active:false},
　　　　{name:"Vue.js",active:false}
　　　　]

}，
methods:{
　　markActive:function(item,index){//这里的itme-->我点击的数据内容   index:我点击的数据的引索
　　　　this.chose = item.name;  //这里表示的是将我选择的信息放置到页面中（item。name）
}

接下来我们需要做的就是对样式的处理，这一步和js中的轮播有点相似 也是一个for循环

for(var i = 0;i<this.items.length;i++){
　　this.tiems[i].active = false    //这里我们需要做的是清除所有a标签的样式
　　这里this.items[i]的作用：取到items里面所有的数据   
 }
this.items[index].active = true   //这里我们单独赋予被选中的a标签show的样式  
}

})
</script>
到这里，一个简单的选项卡就算完成了   下面是效果图

 

转载于:https://www.cnblogs.com/yang656/p/7081399.html