Vue點擊切換顏色的方法
更新時間：2018年09月13日 10:03:20 作者：niesiyuan000
今天小編就為大家分享一篇Vue點擊切換顏色的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<template>
<div>
<div v-for="(list,index) in siYuan" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div>
</div>
</template>
<script>
export default {
data(){
return{
siYuan:[
{"a":"田"},
{"a":"心"},
{"a":"水"},
{"a":"原"}
],
changeRed:-1
}
},
methods:{
change(index){
this.changeRed = index;
}
}
}
</script>
<style>
.aa{
cursor: pointer;
}
.red{
color: red;
}
</style>
以上這篇Vue點擊切換顏色的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了axios接口管理優(yōu)化操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了Vue中的baseurl如何配置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法
這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標(biāo)庫展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標(biāo)的時代，大概是15~16年左右我開始解除阿里Iconfont圖標(biāo)庫，剛開始就只會下載圖標(biāo)使用，需要的朋友可以參考下2021-10-10
基于vue-cli 路由 實現(xiàn)類似tab切換效果（vue 2.0）
這篇文章主要介紹了基于vue-cli 路由 實現(xiàn)類似tab切換效果（vue 2.0），非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
vue2 使用@vue/composition-api依賴包 編譯、打包各種報錯問題分析
由于package.json 文件中 vue、vue-template-compiler 版本號前面 多了個 ^ 導(dǎo)致實際導(dǎo)入時，node_module中的 vue 版本可能被升級為 2.7.x，這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報錯問題分析,需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關(guān)于element的表單組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了Vue使用axios添加請求頭方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
移動端頁面，有時候會出現(xiàn)一些固定定位在底部圖標(biāo)，比如購物車等。這篇文章主要介紹了Vue制作固定定位圖標(biāo)滑動隱藏效果,需要的朋友可以參考下2019-05-05
在一般情況下,vue項目代碼部署發(fā)布只需將代碼打包后直接上傳到服務(wù)器即可,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包并發(fā)布的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue.js購物車添加商品組件的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09