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.datasetconsole.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.datasetitem = JSON.parse(item)console.log(item)}}
})

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

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

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

Vue.js获取data-*的值相关推荐

js把vue转化html,将 vue.js 获取的 html 文本转化为纯文本
我存入数据表中的数据是使用 html 格式,获取数据是使用 vue 获取. 遇到了一个问题,就是界面上显示的数据是 html 格式的,但是我需要它显示纯文本. 怎么做呢?首先在 js 中写一个将 ...
vue.js获取数据库数据
vue.js动态获取数据库数据 (通过vue.cli和webpack搭建的环境) 1.首先我先在创建一个静态的data.json文件,在static下创建json文件夹,(webpack环境下,静态的 ...
Vue.js 获取元素高度的方法【记录】
Vue.js获取下面div的height: <div ref="element"></div> 1.获取高度值:(内容高+padding+边框) let h ...
js获取url参数vue.js获取url参数 JQ获取url参数
在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结. 1.window.location.href(设置或获取整个 URL 为字符串) ...
vue+layui获取CheckBox的值
vue+layui获取CheckBox的值定义一样的name和v-filter 然后对其进行监听.
php 获取css值,如何通过JS获取CSS属性值
JS获取CSS属性 #f{background-color:#FF0000;} var o = document.getElementById('f'); document.write(o.style ...
js获取CuteEditor的值
js获取CuteEditor的值 var editwin = editor1.GetWindow(); Getting the active editor document In order to f ...
js获取classname值_利用js获取元素class值的两种方法
我们有时为了达到某种效果,需要以元素的class值为条件做判断. 我们如何利用JavaScript获取元素class的值?我们先看下面代码: x=document.getElementsByTagNa ...
js获取css属性值的方法
js操作获取dom元素的样式属性值 obj.style: 它只能够获取通过style设置的元素CSS属性值: 在html标签内通过style设置行内属性通过.dom.style.width=&quo ...

Vue.js获取data-*的值

data-*

获取普通数据

获取对象数据

Vue.js获取data-*的值相关推荐

最新文章

热门文章