1 veu单选li变色
思路：1动态绑定样式：选中哪个给哪个加类名
2：给li都添加点击事件，点击事件传参数可以拿到数组对象的的全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in datalist" :key="index"
@click="changeTgeIndex(index, item.name,item.id)"
:class="{unsatisfied:unsatisfied,
tagActivity:
ratingTageIndex == index}"
>
{{item.name}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isShow: true,
ratingTageIndex: 0,
datalist: [{
id: 1,
name: 'ddd'
},
{
id: 2,
name: 'dfdd'
},
{
id: 3,
name: 'dfds'
},
{
id: 4,
name: 'dfdsd'
},
{
id: 5,
name: 'dfdsf'
}
]
},
mounted() {
console.log("aa")
},
methods:{
changeTgeIndex(index, name,id){
console.log(index,name,id)
this.ratingTageIndex = index;
}
}
})
</script>
<style>
.unsatisfied{
background-color: #f5f5f5;
color: #aaa;
}
.tagActivity{
background-color: #3190e8;
color: #fff;
}
</style>
<