Vue實現(xiàn)點擊當(dāng)前行變色
更新時間：2020年12月14日 08:36:07 作者：xiaoShengSanYue
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)點擊當(dāng)前行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)點擊當(dāng)前行變色的具體代碼，供大家參考，具體內(nèi)容如下
話不多說,先上效果
默認(rèn)第一行為紅色,當(dāng)點擊第二行的時候,只有第二行變?yōu)榧t色
代碼如下:
<!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>
關(guān)于vue.js的學(xué)習(xí)教程，請大家點擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue自定義組件雙向綁定實現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
vue3中unplugin-auto-import自動引入示例代碼
unplugin-auto-import 這個插件是為了解決在開發(fā)中的導(dǎo)入問題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動引入的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
下面小編就為大家分享一篇Vue2.0子同級組件之間數(shù)據(jù)交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了vuejs如何配置less，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue項目Element表格對應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問題
這篇文章主要介紹了Vue項目Element表格對應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3+ElementPlus封裝函數(shù)式彈窗組件詳解
這篇文章主要為大家詳細(xì)介紹了如何利用vue3和ElementPlus封裝函數(shù)式彈窗組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-08-08
本篇文章主要介紹了詳解vue.js之綁定class和style的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式
這篇文章主要介紹了vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號的問題及解決方法
這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號要怎么解決,項目場景我是傳遞一個string字符給后端時候報錯，隨手把這個問題記錄下來了，需要的朋友可以參考下解決方案2022-11-11
Vue引入sign-canvas實現(xiàn)簽名畫板效果
這篇文章主要介紹了Vue引入sign-canvas實現(xiàn)簽名畫板,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03