快捷導(dǎo)航

vue實(shí)現(xiàn)給當(dāng)前元素添加樣式,其他元素?zé)o樣式問題

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

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

給當(dāng)前元素添加樣式，其他元素?zé)o樣式

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

咱們直接上代碼

這是按鈕原始的樣子

按鈕有點(diǎn)擊事件后的樣式

這是我在方法中打印的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> //在點(diǎn)擊的時(shí)候我們將index的值傳到方法中
  </div>
</template>
<script>
export default {
  data() {
    return {
      datas: [
        { city: "上海" },
        { city: "北京" },
        { city: "關(guān)東" },
        { 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動(dòng)態(tài)添加樣式

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

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

<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:["選項(xiàng)1","選項(xiàng)2","選項(xiàng)3","選項(xiàng)4","選項(xiàng)5","選項(xiàng)6"],
            clicked:0   //標(biāo)識(shí)，初始化默認(rèn)選中第一項(xiàng)
        }
    },
    methods:{
        changeTab(index){
            this.clicked = index;
        }
    }
}

css樣式，點(diǎn)擊選中添加黑色邊框