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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

axios接口管理優(yōu)化操作詳解
這篇文章主要為大家介紹了axios接口管理優(yōu)化操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
Vue中的baseurl如何配置
這篇文章主要介紹了Vue中的baseurl如何配置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
VUE在線調(diào)用阿里Iconfont圖標庫的方法
這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標庫的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標庫展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標的時代，大概是15~16年左右我開始解除阿里Iconfont圖標庫，剛開始就只會下載圖標使用，需要的朋友可以參考下
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 版本號前面多了個 ^ 導致實際導入時，node_module中的 vue 版本可能被升級為 2.7.x，這篇文章主要介紹了vue2 使用@vue/composition-api依賴包編譯、打包各種報錯問題分析,需要的朋友可以參考下
2023-01-01
關于element的表單組件整理筆記
這篇文章主要給大家介紹了關于element的表單組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
Vue使用axios添加請求頭方式
這篇文章主要介紹了Vue使用axios添加請求頭方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue實現(xiàn)固定定位圖標滑動隱藏效果
移動端頁面，有時候會出現(xiàn)一些固定定位在底部圖標，比如購物車等。這篇文章主要介紹了Vue制作固定定位圖標滑動隱藏效果,需要的朋友可以參考下
2019-05-05
Vue項目打包并發(fā)布的完整步驟記錄
在一般情況下,vue項目代碼部署發(fā)布只需將代碼打包后直接上傳到服務器即可,下面這篇文章主要給大家介紹了關于Vue項目打包并發(fā)布的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-04-04
vue.js購物車添加商品組件的方法
這篇文章主要介紹了vue.js購物車添加商品組件的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09