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)擊選中添加黑色邊框

.bor{
   border:2px solid black;
}

效果：

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

vue常用指令

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

? 語法：<元素標(biāo)簽 v-指令 = “表達(dá)式”>

1.v-text

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

2.v-html指令

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

3.v-show

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

4.v-if指令

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

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

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

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

5.v-else指令

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

如下圖代碼所示：

6.v-for指令

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

7.v-bind指令

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

8.v-on指令

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

9.v-model指令

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

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

動(dòng)態(tài)添加樣式

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

1. :class方式

2. :style方式

總結(jié)

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

最新評論