vue2.0逻辑思维选项卡。
程序员文章站
2022-04-06 23:48:13
...
Hello，选项卡？很简单嘛！那项目中所有数据都是‘活’的，而不是一个静态页面怎么通过vue写出vue中的选项卡呢？
页面部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
ul{
position: relative;
}
ul li{
list-style: none;
width: 100px;
height: 200px;
background: pink;
position: absolute;
display: none;
}
ol li{
float: left;
padding: 10px 15px;
background: blue;
margin-left: 15px;
list-style: none;
cursor: pointer;
margin-left: 200px;
}
.active{
display: block;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for='(msg,index) in msgs' :class='{active:active == index}'>{{msg}}</li>
</ul>
<ol>
<li v-for='(a,index) in as' @click='add(index)'>{{a}}</li>
</ol>
</div>
</body>
</html>简单看一下布局！ 我们的内容，跟标题的选项都是动态的，都可以通过后台请求数据得来，灵活！！！。
JS部分：
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msgs:['我是内容一','我是内容二','我是内容三'],
as:['选项卡一','选项卡二','选项卡三'],
active:'0'
},
methods:{
add(index){
this.active = index;
}
}
})
</script>解释一下里面的逻辑：
v-for循环我就不解释了，相信大家比我理解的深。
我们看一下 :class='{**active**:*active* == index}'
绑定class 为 **active** 我们这个加粗的active在我们的css中写到。display：block。
而 斜体的 active 是我们vue对象中的 active : 0 我们在类里面添加了一个判断 如果 active == index 我们就让当前的 li（内容） 显现出来 剩下最后一步，点击每一个按钮时对应内容出现 也就说 下标相同即可。
add(index){
this.active = index
}index 是vue中自带的 下标获取的 (仅限于v-for循环中)
配一张逻辑图：
我是杨小宝！跟大家一起学习 Vue2.X 的世界吧！