Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色
更新時(shí)間：2020年12月14日 08:36:07 作者：xiaoShengSanYue
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色的具體代碼，供大家參考，具體內(nèi)容如下
話(huà)不多說(shuō),先上效果
默認(rèn)第一行為紅色,當(dāng)點(diǎn)擊第二行的時(shí)候,只有第二行變?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í)教程，請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例
今天小編就為大家分享一篇vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue3?中的toRef函數(shù)和toRefs函數(shù)的基本使用
這篇文章主要介紹了vue3?toRef函數(shù)和toRefs函數(shù),文中介紹了ref和toRef的區(qū)別，ref本質(zhì)是拷貝，修改響應(yīng)式數(shù)據(jù)不會(huì)影響原始數(shù)據(jù)，toRef的本質(zhì)是引用關(guān)系，修改響應(yīng)式數(shù)據(jù)會(huì)影響原始數(shù)據(jù)，需要的朋友可以參考下2022-11-11
Vue實(shí)現(xiàn)單點(diǎn)登錄控件的完整代碼
這里提供一個(gè)Vue單點(diǎn)登錄的demo給大家參考，對(duì)Vue實(shí)現(xiàn)單點(diǎn)登錄控件的完整代碼感興趣的朋友跟隨小編一起看看吧2021-11-11
這篇文章主要介紹了vue如何使用笛卡爾積算法構(gòu)建sku表格問(wèn)題，具有很好的價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見(jiàn)方法匯總
在 Vue 3 項(xiàng)目開(kāi)發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項(xiàng)常見(jiàn)的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06
vue學(xué)習(xí)筆記之vue1.0和vue2.0的區(qū)別介紹
今天我們來(lái)說(shuō)一說(shuō)vue1.0和vue2.0的主要變化有哪些？對(duì)vue相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2017-05-05
Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例
這篇文章主要介紹了Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue中如何使用math.js問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vuex如何獲取getter對(duì)象中的值(包括module中的getter)
這篇文章主要介紹了Vuex如何獲取getter對(duì)象中的值(包括module中的getter)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue2.0 UI框架ElementUI的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04