css部分
<style>
.active {
color: red;
}
</style>
网页显示部分
<p>作业</p>
<div id="app">
<ul>
<li v-for="(item,index) in movies" @click='changeColor(index)' :class="{atcive:index==count}">{{item}}</li>
</ul>
</div>
JS部分
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ('#app'),
data: {
movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
count: -1,//若设为0,则默认第一个项为红字
},
methods: {
changeColor: function(index) {
this.count = index;
}
}
})
</script>
V-for
v-for标签可用来遍历数组,还可以遍历对象的属性
vue2.0新数组语法:
(item,index)in arr
v-for="(item,index) in movies"
//in也可以用of替代
@Click
用来监听事件,并在触发时运行一些javaScript代码。
@click='changeColor(index)'
methods: {
changeColor: function(index) {
this.count = index;
}
}
:class="{active:index==count}"
:class :动态绑定class
active :用来实现实现active点击切换
循环的情况:
1、点击时传入index索引(获取当前点击的是哪个)
@click=“active(index)”
2、将索引值传入class(索引等于几就第几个添加active类)
:class="{active:index==count}"
3、在data里边添加count:0(表示默认第一个添加active类)
data{ count:0 }
4、最后在methods里边添加方法
fountion (index) {
this.count=index
}
5、最后在css中写上active的样式
也可以用三目运算符实现
:class="{count==index ? 'active' :''}"
如果 count==index 为真,则class=active.