要求是写一个原先停留在列表第一个文字变红,然后再次点击别的列表选项,所点击列表选项变红,而其他仍停留在黑色的程序。实现这个知识点需要的是v-bind的动态绑定以及v-for的循环数组。
第一次失败代码:只能实现全黑或者全红
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变颜色</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style>
.changeColor{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies" :class="{'changeColor':isActive}" @click="getColor()">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
movies:["海王","天气之子","格林","午夜德州","新阴阳魔界","排球女将","良医"],
isActive : false
},
methods:{
getColor(){
isActive = !isActive;
}
}
})
</script>
</body>
</html>
第二次尝试成功:获取了数组的下标作为判断TRUE or FALSE的依据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变颜色</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style>
.changeColor{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies" :class="{'changeColor': num == index}" @click="getColor(index)">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
movies:["海王","天气之子","格林","午夜德州","新阴阳魔界","排球女将","良医"],
num:0
},
methods:{
getColor(index){
this.num = index;
}
}
})
</script>
</body>
</html>
第三次可以尝试用一个button改变颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变颜色</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style>
.changeColor{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li :class="{'changeColor': isActive}">{{message}}</li>
</ul>
<button @click="getColor(isActive)">点击我变颜色</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"必须做点什么,要行动起来!",
isActive: false
},
methods:{
getColor(isActive){
this.isActive = !isActive;
}
}
})
</script>
</body>
</html>