Vue實現點選當前行變色
阿新 • • 發佈：2020-12-15
本文例項為大家分享了Vue實現點選當前行變色的具體程式碼，供大家參考，具體內容如下
話不多說,先上效果
預設第一行為紅色,當點選第二行的時候,只有第二行變為紅色
程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in names" :class="{active:currentIndex === index}" @click="liClick(index)">{{item}}</li>
</ul>
</div>
<!-- 引入Vue -->
<script src="vue.js"></script>
<script>
const app = new Vue({
el:"#app",data:{
names:['xiaoqiao','xiaosheng','xiaonan'],currentIndex:0
},methods:{
liClick(index){
this.currentIndex = index
}
}
})
</script>
</body>
</html>關於vue.js的學習教程，請大家點選專題vue.js元件學習教程、Vue.js前端元件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。