<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点击变色，兄弟元素不变色</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.color{
color: red;
}
</style>
<body>
<div id="app">
<ul>
<li :class="{color: list.checked}" @click="click_btn(list, index)" v-for="(list, index) in arr" :key="index">
-------- {{list.name}} --------
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
color_red: true,
arr: [
{
name: '111111',
checked: false
},
{
name: '2222222222',
checked: false
},
{
name: '333333333',
checked: false
}
]
},
methods: {
click_btn: function (list, index) {
var this_1 = this
console.log(list)
for(var i in this_1.arr){
if( i == index){
this_1.arr[i].checked = true
}else{
this_1.arr[i].checked = false
}
}
console.log(this_1.arr)
}
},
mounted() {
}
})
</script>
</body>
</html>