Vue.js获取data-*的值

时间:2022-09-29 大前端工程师人气:0

data-*

这个属性熟悉JS的小伙伴都知道，data-*是一个自定义属性，它的功能是视图层往js传递我们想要传的数据。我们的JS可以控制视图层，但是我们往往需要用户操作视图层，逻辑层也能够获取用户的交互值，这个时候我们就需要data-*属性了

获取普通数据

我们的js数据类型大体上可分为，数字类型，字符类型，布尔值类型，对象类型。其实还有undefined和null

我把数字类型，字符类型，布尔值类型称之为普通数据类型，我们接下来分别演示

静态获取

静态获取指的是我们的data-*是写死的，不是动态的

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是样式对象
	data() {
		return{
			myStyle:{
				background:"red",
				width:100+"px",
				height:100+"px"
			}
		}
	},
	methods:{
		click:function(e){
		    //e.target.dataset可以获取数值
			console.log(e.target.dataset)
		}
	}
})

点击红色块之后的效果：

注意看右边的数据，返回的全是字符串。可是我们传递的数值有的不是字符串，但是全部转化成了字符串了。我们只能后续进行类型转化了

动态获取

动态获取数据指的是我们获取的数据是动态的，通常我们喜欢用在v-for中，用于判断用户点击列表为第多少项

html

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

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)+"项")
		}
	}
})

点击li之后的效果

获取对象数据

对象数据与普通数据不同，它们需要使用JSON.stringfy进行字符串化

动态获取

HTML

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

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)
		}
	}
})

如果遇到特殊字符报错的话，尝试修改JS代码如下：

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

进行编码和解码序列化操作就好了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

加载全部内容