vue中標(biāo)簽自定義屬性的使用及說明

更新時間：2023年05月11日 10:23:55 作者：dearqz

這篇文章主要介紹了vue中標(biāo)簽自定義屬性的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue標(biāo)簽自定義屬性使用

在 vue 中，盡量避免對dom的操作，通過對狀態(tài)的管理實(shí)現(xiàn)需要的功能

舉個例子

vue獲取dom元素可以使用 ref 要想獲得自定義屬性，可以通過設(shè)置 ref 實(shí)現(xiàn)

<span data-num="21" ref="dataNum" ?@click="getData">55</span>
getData:function () {
? ?console.log(this.$refs.dataNum.dataset.num);
}

但是vue 不推薦這樣做，你可以這樣做

<span ?@click="getData('21')">55</span>
getData:function (num) {
? ?console.log(num);
}

像這樣的（關(guān)于input中的屬性），一般可以放到name空間里，可以通過$attr屬性獲取相應(yīng)的值

<input ref="dataNum" name="21" :value="value1"></input>
<span @click="getData">獲取name</span>
getData:function () {
? ?console.log(this.$refs.dataNum.$attr.name);
}

但是這樣為何不直接傳進(jìn)去狀態(tài)值呢

<input v-modle="value1"></input>
<span @click="getData('21')">獲取name</span>
getData:function (num) {
? ?console.log(num);
}

當(dāng)然操作dom還可以通過e.target操作獲取，還是不推薦

<span data-num="21" @click="getData">55</span>
getData:function (e) {
? ?console.log(e.target.getAttribute('data-num'));
}

vue自定義屬性的設(shè)置及獲取

寫多了小程序，再寫vue，在寫方法傳值的時候就自然而然的就想要去使用自定義屬性，既簡單又方便。

小程序中設(shè)置自定義屬性及獲取

那么在小程序中的標(biāo)簽自定義屬性的寫法及獲取如下：

小程序：

①.標(biāo)簽設(shè)置自定義屬性
<image catchtap="guanbiFn" data-which="look" src="../images/guanbia.png" class="guanbiImg"/>
//就想這樣直接用data-自定義屬性名，然后賦上你所需要的值就可以
②、獲取標(biāo)簽設(shè)置的自定義屬性值
? guanbiFn(e){
? ?? ??? ?console.log("e.currentTarget.dataset.which");//look
? }
? //這樣就直接獲取到了

vue中設(shè)置自定義屬性及獲取

那么在使用vue去寫項(xiàng)目的時候，再想用這一套明顯是有點(diǎn)不合適的。

vue中設(shè)置動態(tài)屬性是要用v-modal的，也可以簡寫為半角冒號":"，那么也就是說我們想要設(shè)置自定義屬性也還是得用這個語法才可以。

Vue：
①、標(biāo)簽設(shè)置自定義屬性
<span :index="index" :show="item.IsShow" ref="dataSelf" @click="selectBrand" v-for="(item,index) in getChoiceData.BrandList">{{item.Name}}</span>
//看上面一行代碼，有循環(huán)，循環(huán)中用了內(nèi)容和下標(biāo)，那么我想設(shè)置有關(guān)于下標(biāo)數(shù)值和某一個內(nèi)容的自定義屬性，方便在方法中去使用，這就是一種方法，（當(dāng)然了除了這種傳值其實(shí)也可以直接形參傳值的那種方法去獲取也可以）。
②、獲取標(biāo)簽設(shè)置的自定義屬性值
vue獲取的時候有兩種方法：
?? ? ?selectBrand(e) {
?? ? ??? ??? ?//方法一：操作Dom
?? ? ??? ??? ?console.log(this.$refs.dataSelf.dataset.index);//獲取到我們循環(huán)中的下標(biāo)值
?? ? ??? ??? ?//方法二：通過e.target.getAttribute
?? ? ??? ??? ?console.log(e.target.getAttribute('show'));//獲取到循環(huán)中的IsShow的值
?? ? ?}