vue中標簽自定義屬性的使用及說明

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

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

vue標簽自定義屬性使用

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

舉個例子

vue獲取dom元素可以使用 ref 要想獲得自定義屬性，可以通過設置 ref 實現(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);
}

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

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

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

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

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

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

vue自定義屬性的設置及獲取

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

小程序中設置自定義屬性及獲取

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

小程序：

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

vue中設置自定義屬性及獲取

那么在使用vue去寫項目的時候，再想用這一套明顯是有點不合適的。

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

Vue：
①、標簽設置自定義屬性
<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)容和下標，那么我想設置有關于下標數(shù)值和某一個內(nèi)容的自定義屬性，方便在方法中去使用，這就是一種方法，（當然了除了這種傳值其實也可以直接形參傳值的那種方法去獲取也可以）。
②、獲取標簽設置的自定義屬性值
vue獲取的時候有兩種方法：
?? ? ?selectBrand(e) {
?? ? ??? ??? ?//方法一：操作Dom
?? ? ??? ??? ?console.log(this.$refs.dataSelf.dataset.index);//獲取到我們循環(huán)中的下標值
?? ? ??? ??? ?//方法二：通過e.target.getAttribute
?? ? ??? ??? ?console.log(e.target.getAttribute('show'));//獲取到循環(huán)中的IsShow的值
?? ? ?}