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中設置動態屬性是要用v-modal的,也可以簡寫爲半角冒號":",那麼也就是說我們想要設置自定義屬性也還是得用這個語法纔可以。

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章