vue實現(xiàn)給當前元素添加樣式,其他元素無樣式問題

更新時間：2023年05月20日 08:47:39 作者：woderlili

這篇文章主要介紹了vue實現(xiàn)給當前元素添加樣式,其他元素無樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

給當前元素添加樣式，其他元素無樣式

今天做項目的時候遇到，給當前元素綁定樣式，原來使用原生js寫點亮盒子的時候都是利用for循環(huán)，循環(huán)元素列表，在利用this來綁定當前元素，給當前元素添加類名或類樣式，當然在添加類樣式前，還要將所有添加過的類樣式移除掉，然而vue就沒有這么麻煩

咱們直接上代碼

這是按鈕原始的樣子

按鈕有點擊事件后的樣式

這是我在方法中打印的index值，以防有小伙伴不知道>-<

<template>
  <div class="content">
    <span 
    v-for="(item, index) in datas"  //遍歷我們的數(shù)組
    class="btn" 
    :class="{active:index==isShow}"  //看vue官方文檔可以通過boolean值控制樣式的顯隱性
    @click="changeColor(index)">{{item.city}}</span> //在點擊的時候我們將index的值傳到方法中
  </div>
</template>
<script>
export default {
  data() {
    return {
      datas: [
        { city: "上海" },
        { city: "北京" },
        { city: "關東" },
        { city: "安徽" }
      ],
      isShow: -1
    };
  },
  methods: {
    changeColor(index) {
      console.log(index);
      this.isShow = index
    }
  }
};
</script>
<style scoped>
.content {
   width: 300px;
   margin:100px auto;
}
.btn {
  display: inline-block;
  margin: 10px;
  border: 1px solid #666;
  border-radius: 10px;
  padding:4px 8px;
  color: #5e13b4;
  font-size: 14px;
  cursor: pointer;
}
.active {
  background-color: #5e13b4;
  color: #fff;
}
</style>

vue動態(tài)添加樣式

vue實現(xiàn)點擊切換改變樣式

html代碼：根據(jù)數(shù)據(jù)動態(tài)循環(huán)一個列表

<ul>
    <li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)">{{list}}</li>
</ul>

js代碼：

export default {
    data(){
        return{
            dataList:["選項1","選項2","選項3","選項4","選項5","選項6"],
            clicked:0   //標識，初始化默認選中第一項
        }
    },
    methods:{
        changeTab(index){
            this.clicked = index;
        }
    }
}

css樣式，點擊選中添加黑色邊框

.bor{
   border:2px solid black;
}

效果：

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue2和Vue3響應式原理對比分析
Vue2采用Object.defineProperty實現(xiàn)響應式,存在無法監(jiān)聽新增屬性、數(shù)組索引變化及性能問題；Vue3使用Proxy全面覆蓋,支持更靈活的數(shù)據(jù)操作,性能更優(yōu)且TypeScript兼容性更好,推薦長期項目使用Vue3
2025-08-08
面試官常問的題之說一下Vue中setup的props和context
setup是一個組件選項,在組件被創(chuàng)建之前,props被解析之后執(zhí)行,這篇文章主要介紹了Vue中setup的props和context的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2026-04-04
vue實現(xiàn)圖片預覽組件封裝與使用
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片預覽組件封裝與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
Vue3中使用styled-components的實現(xiàn)
本文主要介紹了Vue3中使用styled-components的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-05-05
這篇文章主要介紹了ant design pro中可控的篩選和排序?qū)嵗?，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11