在正常的js中。我們如果要實現點擊選中active然后其他取消的效果，我們可以定義一個類，當點擊的時候給給多有的dom取消active的類，給當前元素加上這個類名，說的很啰嗦，直接來看代碼說話吧（表示樓主用的是jq）:
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
}
li:active {
cursor: pointer;
}
.active {
background-color: aqua;
}
</style>
<script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
</head>
<body>
<ul>
<li>this is pne</li>
<li>this is two</li>
<li>this is three</li>
</ul>
</body>
<script>
$(() => {
$("li").click((e) => {
$("li").removeClass("active");
$(e.target).addClass("active");
})
})
</script>
效果如下圖所示：
但是在vue里面，是不提倡進行dom操作的，如果非進行dom的話，vue2.0里面有一個ref的屬性，是可以達到dom的效果的。那么接下來我們不接住dom來進行操作：
由於習慣了webpack和vue-cli腳手架，所以樓主所有vue的代碼都是放在webpack的腳手架當中進行，還使用了pug和scss的預處理器，vue的代碼如下：
<template lang="pug">
ul
li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}}
</template>
<style lang="scss">
li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
&:hover {
cursor: pointer;
}
}
.active{
background-color: aqua;
}
</style>
<script>
export default{
data(){
return {
classArr: ["one", "two", "three"],
num:"",
}
},
methods: {
result(index){
this.num = index;
}
},
computed:{
resultNum(){
return this.num;
}
}
}
</script>
思路如下：
這段代碼使用的是index這個關鍵字，還使用了computed這個計算屬性，當當前的index索引與點擊的當前元素的下標相同的時候，便會觸發active這個類名。說的很簡練，不懂的可以加博主一起探討