vue中標(biāo)簽自定義屬性的使用及說(shuō)明
vue標(biāo)簽自定義屬性使用
在 vue 中,盡量避免對(duì)dom的操作,通過(guò)對(duì)狀態(tài)的管理實(shí)現(xiàn)需要的功能
舉個(gè)例子
vue獲取dom元素可以使用 ref 要想獲得自定義屬性,可以通過(guò)設(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空間里,可以通過(guò)$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還可以通過(guò)e.target操作獲取,還是不推薦
<span data-num="21" @click="getData">55</span>
getData:function (e) {
? ?console.log(e.target.getAttribute('data-num'));
}vue自定義屬性的設(shè)置及獲取
寫(xiě)多了小程序,再寫(xiě)vue,在寫(xiě)方法傳值的時(shí)候就自然而然的就想要去使用自定義屬性,既簡(jiǎn)單又方便。
小程序中設(shè)置自定義屬性及獲取
那么在小程序中的標(biāo)簽自定義屬性的寫(xiě)法及獲取如下:
小程序:
①.標(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ě)項(xiàng)目的時(shí)候,再想用這一套明顯是有點(diǎn)不合適的。
vue中設(shè)置動(dòng)態(tài)屬性是要用v-modal的,也可以簡(jiǎn)寫(xiě)為半角冒號(hào)":",那么也就是說(shuō)我們想要設(shè)置自定義屬性也還是得用這個(gè)語(yǔ)法才可以。
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ù)值和某一個(gè)內(nèi)容的自定義屬性,方便在方法中去使用,這就是一種方法,(當(dāng)然了除了這種傳值其實(shí)也可以直接形參傳值的那種方法去獲取也可以)。
②、獲取標(biāo)簽設(shè)置的自定義屬性值
vue獲取的時(shí)候有兩種方法:
?? ? ?selectBrand(e) {
?? ? ??? ??? ?//方法一:操作Dom
?? ? ??? ??? ?console.log(this.$refs.dataSelf.dataset.index);//獲取到我們循環(huán)中的下標(biāo)值
?? ? ??? ??? ?//方法二:通過(guò)e.target.getAttribute
?? ? ??? ??? ?console.log(e.target.getAttribute('show'));//獲取到循環(huán)中的IsShow的值
?? ? ?}總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3組合式api創(chuàng)建單文件組件的寫(xiě)法
Vue3?中的?Composition?API?是一種新的編寫(xiě)組件邏輯的方式,它提供了更好的代碼組織、類(lèi)型推導(dǎo)、測(cè)試支持和復(fù)用性,本文為大家介紹了vue3利用組合式api創(chuàng)建單文件組件的方法,感興趣的可以了解下2023-08-08
淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解
這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解,v-model用于表單的數(shù)據(jù)綁定很常見(jiàn),下面就來(lái)詳細(xì)的介紹一下2018-11-11
vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來(lái)搭建,本文給大家分享實(shí)例代碼,需要的朋友可以參考下2019-12-12
詳解基于vue-cli配置移動(dòng)端自適應(yīng)
本篇文章主要介紹了詳解基于vue-cli配置移動(dòng)端自適應(yīng),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue中計(jì)算屬性和監(jiān)聽(tīng)屬性及數(shù)據(jù)的響應(yīng)式更新和依賴(lài)收集基本原理講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2023-03-03
關(guān)于vue3.0使用axios報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue3.0使用axios報(bào)錯(cuò)問(wèn)題記錄,vue-cli3.0安裝插件的時(shí)候要注意區(qū)分vue-cli2.0的命令,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08

