vue v-for v-on v-bind的结合使用
学习不是一蹴而就，慢慢掌握，一开始做这道题的时候会不知道从哪里下手，多敲代码，就体会了其中的套路啦。
需求：点击哪个标签，哪个标签就会变红色
1.先使用v-for把列表展示出来
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="css/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <ul> <li v-for="(index,item) in movies">{{item}}.{{index}}</li> </ul> </div> <script type="text/javascript"> const app = new Vue({ el:"#app", data:{ message:"hello world", movies:['海王','加勒比海盗','海尔兄弟','海贼王'] } }) </script> </body> </html>
注意点a.index是下标
b.v-for写完后要把要把循环的东西表示出来，用{{}}包围
2.第一步，动态的添加class，通过对象的方式，v-bind：class=“{active：true}” 注意这里的class等于的是一个动态对象，需要用{}
第二步，在data中初始化， currentIndex：0， 接着， 用currentIndex === index 来判断ture，false来控制是否显示class
第三步 监听点击事件 v-on:click或者 @click ，注意需要传入参数index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="css/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.active{color: red;}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies"
:class="{active:currentIndex === index}"
@click="liclick(index)">
{{index}}.{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
currentIndex:0,
movies:['海王','加勒比海盗','海尔兄弟','海贼王']
},
methods:{
liclick(index){
this.currentIndex = index
}
}
})
</script>
</body>
</html>
