您现在的位置是：网站首页> 编程资料编程资料

Vue.js如何获取data-*的值_vue.js_

2023-05-24 310人已围观

简介 Vue.js如何获取data-*的值_vue.js_

data-*

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

获取普通数据

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

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

静态获取

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

html代码

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

  • {{item.name}}

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

点击li之后的效果

获取对象数据

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

动态获取

HTML

  •  {{item.name}}

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

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

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

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

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

您可能感兴趣的文章:

上一篇：详解Anyscript开发指南绕过typescript类型检查_JavaScript_

下一篇：vue Keep-alive组件缓存的简单使用代码_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网