學習不是一蹴而就，慢慢掌握，一開始做這道題的時候會不知道從哪里下手，多敲代碼，就體會了其中的套路啦。
需求：點擊哪個標簽，哪個標簽就會變紅色
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>