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;
}

效果：

vue常用指令以及動態(tài)添加樣式

vue常用指令

Vue的指令是以v-開頭的，作用于頁面中的元素，所以需要將指令綁定與元素中，從而達到給綁定的元素添加行為的目的。

? 語法：<元素標簽 v-指令 = “表達式”>

1.v-text

用于更新標簽包含的文本，它的作用跟雙大括號效果是一樣的。

2.v-html指令

綁定一些包含html代碼的數(shù)據(jù)在視圖上，例如< strong >Daisy</ strong>,這個字符包含了< strong>標簽，要想< strong>不被當做普通的字符串渲染出來，發(fā)揮< strong>應(yīng)有的效果，我們就得使用v-html指令 。

3.v-show

指令的取值為true/false，分別對應(yīng)著顯示/隱藏，例如下面這段代碼，show1會被顯示出來，show2會被隱藏。

4.v-if指令

取值為true/false，控制元素是否需要被渲染，例如下面代碼，設(shè)置為true的

標簽成功渲染出來，而設(shè)置為false的,

標簽被一行注釋代替了，并沒有被解析渲染出來。

v-show和v-if的區(qū)別: v-if是判斷是否有DOM節(jié)點, v-show是判斷節(jié)點是否顯示隱藏,如果需要頻繁切換顯示/隱藏的可以用v-show;如果運行后不太可能需要切換顯示/隱藏的可以用v-if

5.v-else指令

和v-if指令搭配使用，沒有對應(yīng)的值。當v-if的值false，v-else才會被渲染出來。

如下圖代碼所示：

6.v-for指令

遍歷data中存放的數(shù)組數(shù)據(jù)，實現(xiàn)列表的渲染。（v-for指令除了可以迭代數(shù)組，還可以迭代對象和整數(shù)）

7.v-bind指令

用于動態(tài)綁定DOM元素的屬性;例如 標簽的href屬性，< img>標簽的src屬性等。v-bind可以簡寫成“：”

8.v-on指令

可以綁定事件的監(jiān)聽器。通過v-on指令修飾click點擊事件，指定事件響應(yīng)后的處理函數(shù)為methods中的say()方法，可簡寫成@ 如下所示：

9.v-model指令

用于表單輸入，實現(xiàn)表單控件和數(shù)據(jù)的雙向綁定。

只要給input控件添加v-model指令，并指定關(guān)聯(lián)的數(shù)據(jù)content，就可以輕松把用戶輸入的內(nèi)容綁定在content上。

動態(tài)添加樣式

動態(tài)添加可以采用：class 也可以采用：style

1. :class方式

2. :style方式

總結(jié)

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

最新評論