快捷導(dǎo)航

Vue.js如何獲取data-*的值

更新時(shí)間：2022年09月21日 10:52:31 作者：大前端工程師

這篇文章主要介紹了Vue.js如何獲取data-*的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

data-*

這個(gè)屬性熟悉JS的小伙伴都知道，data-*是一個(gè)自定義屬性，它的功能是視圖層往js傳遞我們想要傳的數(shù)據(jù)。我們的JS可以控制視圖層，但是我們往往需要用戶(hù)操作視圖層，邏輯層也能夠獲取用戶(hù)的交互值，這個(gè)時(shí)候我們就需要data-*屬性了

獲取普通數(shù)據(jù)

我們的js數(shù)據(jù)類(lèi)型大體上可分為，數(shù)字類(lèi)型，字符類(lèi)型，布爾值類(lèi)型，對(duì)象類(lèi)型。其實(shí)還有undefined和null

我把數(shù)字類(lèi)型，字符類(lèi)型，布爾值類(lèi)型稱(chēng)之為普通數(shù)據(jù)類(lèi)型，我們接下來(lái)分別演示

靜態(tài)獲取

靜態(tài)獲取指的是我們的data-*是寫(xiě)死的，不是動(dòng)態(tài)的

html代碼

<div id="app">
	<div :style="myStyle" data-num=1 data-str="hello" data-bool=true @click="click($event)"></div>
</div>

js代碼

var app=new Vue({
	el:'#app',
	//myStyle是樣式對(duì)象
	data() {
		return{
			myStyle:{
				background:"red",
				width:100+"px",
				height:100+"px"
			}
		}
	},
	methods:{
		click:function(e){
		    //e.target.dataset可以獲取數(shù)值
			console.log(e.target.dataset)
		}
	}
})

點(diǎn)擊紅色塊之后的效果：

注意看右邊的數(shù)據(jù)，返回的全是字符串?？墒俏覀儌鬟f的數(shù)值有的不是字符串，但是全部轉(zhuǎn)化成了字符串了。我們只能后續(xù)進(jìn)行類(lèi)型轉(zhuǎn)化了

動(dòng)態(tài)獲取

動(dòng)態(tài)獲取數(shù)據(jù)指的是我們獲取的數(shù)據(jù)是動(dòng)態(tài)的，通常我們喜歡用在v-for中，用于判斷用戶(hù)點(diǎn)擊列表為第多少項(xiàng)

html

<div id="app">
	<ul>
		<li v-for="(item,index) in datalist" :data-op="index" @click="click($event)">{{item.name}}</li>
	</ul>
</div>

js

var app=new Vue({
	el:'#app',
	data() {
		return{
			datalist:[
				{
					id:0,
					name:'小明',
				},
				{
					id:1,
					name:'小紅',
				},
				{
					id:2,
					name:'小剛',
				}
			]
		}
	},
	methods:{
		click:function(e){
			let {op}=e.target.dataset
			console.log("選中了第"+(parseInt(op)+1)+"項(xiàng)")
		}
	}
})

點(diǎn)擊li之后的效果

獲取對(duì)象數(shù)據(jù)

對(duì)象數(shù)據(jù)與普通數(shù)據(jù)不同，它們需要使用JSON.stringfy進(jìn)行字符串化

動(dòng)態(tài)獲取

HTML

<div id="app">
	<ul>
		<li v-for="(item) in datalist" :data-item="JSON.stringify(item)" @click="click($event)">
			{{item.name}}</li>
	</ul>
</div>

js

var app = new Vue({
	el: '#app',
	data() {
		return {
			datalist: [{
					id: 0,
					name: '小明',
				},
				{
					id: 1,
					name: '小紅',
				},
				{
					id: 2,
					name: '小剛',
				}
			]
		}
	},
	methods: {
		click: function(e) {
			let {
				item
			} = e.target.dataset
			item = JSON.parse(item)
			console.log(item)
		}
	}
})

如果遇到特殊字符報(bào)錯(cuò)的話(huà)，嘗試修改JS代碼如下：

click: function(e) {
	let {
		item
	} = e.target.dataset
	item=encodeURIComponent(item)
	item = JSON.parse(decodeURIComponent(item))
	console.log(item)
}

進(jìn)行編碼和解碼序列化操作就好了

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

您可能感興趣的文章: