vue實(shí)現(xiàn)點(diǎn)擊追加選中樣式效果
更新時(shí)間：2019年11月01日 17:15:10 作者：qiankui
今天小編就為大家分享一篇vue實(shí)現(xiàn)點(diǎn)擊追加選中樣式效果，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
DOM部分
<ul>
<li class="liMenu"
:class="idx==index?'hover':''" @click="son(item,idx)" v-for="(item,idx) in menu"
:key="idx">{{item}}
</li>
</ul>
JS
data(){
return{
menu:['首頁','列表頁','詳情頁'],
index:0
}
},
methods:{
son(item,idx){
this.index=idx;
}
}
CSS
.liMenu{
margin-right: 20px;
cursor:pointer;
}
.liMenu.hover{
color:red;
}
效果：
以上這篇vue實(shí)現(xiàn)點(diǎn)擊追加選中樣式效果就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)吸頂、錨點(diǎn)和滾動高亮按鈕效果
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)簡單的吸頂、錨點(diǎn)和滾動高亮按鈕效果,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了詳解Vue2 添加對scss的支持，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue項(xiàng)目結(jié)合Vue-layer實(shí)現(xiàn)彈框式編輯功能(實(shí)例代碼)
這篇文章主要介紹了Vue項(xiàng)目中結(jié)合Vue-layer實(shí)現(xiàn)彈框式編輯功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue時(shí)間轉(zhuǎn)換的幾種方式,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了使用@tap.stop阻止事件繼續(xù)傳播，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue+iview如何實(shí)現(xiàn)拼音、首字母、漢字模糊搜索
這篇文章主要介紹了vue+iview如何實(shí)現(xiàn)拼音、首字母、漢字模糊搜索，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼
這篇文章主要介紹了vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue中使用gojs/jointjs的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中
這篇文章主要介紹了element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中的方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue跳轉(zhuǎn)頁面打開新窗口,并攜帶與接收參數(shù)方式
這篇文章主要介紹了vue跳轉(zhuǎn)頁面打開新窗口，并攜帶與接收參數(shù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04