VUE.JS(vue)简单实现TAB标签栏高亮切换—
今天咱给大家分享一个小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li {
cursor: pointer;
list-style: none;
}
.active {
color: red;
}
</style>
</head>
<body>
<div id='app'>
<ul>
<li v-on:click='btnClick(index)' v-for='(m,index) in movies' v-bind:class='currentIndex==index?"active":""'>{{index}}: {{m}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
movies: ['贰零贰壹', '新年快乐', '恭喜发财', '红包拿来'],
//这isActive为0(也可以改写为false)
isActive: 0,
//这currentIndex就是数组中第一个(贰零贰壹)为默认样式(字体为红色)
currentIndex: 0
},
methods: {
btnClick: function(index) {
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
首先v-on:click='btnClick(index)'这段初始结构是v-on:click='btnClick’这个对吧因为我下面methods里面写了点击函数,我就的要参数参数就是我这个index传进来之后条件围绕下标来就是currentIndex我是在methods里我必须加this是吧,当我点击谁我就让点击谁的index=我的currentIndex
然后v-bind:class='currentIndex==index?“active”:""'我再用这个实现class里面我还写了一个三元表达式如果我currentIndex能跟我的index对应上就加样式不能的话样式就为空(排他思想)
这就vans了
谢谢大家的浏览