vue.js 获取当前自定义属性值

假设有一个标签h5, 我们给它添加了一个自定义属性值，（item.id是从动态添加的）

点击h5 标签，如何才能获取当前对应的自定义属性值呢？

想当然的我最开始这样写：

<h5 class="left t-title" @click='getDataId' :data-id="item.id"></h5>

<script>
  methods: {
    getDataId() {
      console.log(this.data-id);
    }
   },

</script>

显然，这样是拿不到 data-id的值的。。。。

应该这样做：

<h5 class="left t-title" @click='getDataId(item.id)' :data-id="item.id"></h5>

<script>
  methods: {
    getDataId(id) {
      console.log(id);
    }
   },

</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2.0获取自定义属性的值

    最近在项目中使用了vue.js.在爬坑的路上遇到了很多问题.这里都会给记录下来,今天要说的是怎么获取自定义属性的值. HTML <!DOCTYPE html> <html> <head> <script src="http://vuejs.org/js/vue.js"></script> <meta charset="utf-8"> <title>JS Bin</title&g

  • vue.js 获取当前自定义属性值

    假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class="left t-title" @click='getDataId' :data-id="item.id"></h5> <script> methods: { getDataId() { console.log(this.data-id); }

  • Vue.js获取被选择的option的value和text值方法

    如下所示: 1.获取option的value的值,watch option 控件时,或自动获取option的value的值. 2.获取被选中的option的text的值时,使用:$("#optionID option:selected").text 拓展知识:select标签如何传递选中option的value值与text值方法 如下所示: <select name="type" onchange="show_sub(this.options[thi

  • vue.js 获取select中的value实例

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./vue.js"></script> </head> <

  • vue.js获取数据库数据实例代码

    vue.js动态获取数据库数据 (通过vue.cli和webpack搭建的环境) 1.首先我先在创建一个静态的data.json文件,在static下创建json文件夹,(webpack环境下,静态的文件放在static目录下) { "data":[ {"id":1,"name": "yidong", "age": "11" }, {"id":2,"name

  • js 获取radio按钮值的实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • 使用JS获取SessionStorage的值

    获取sessionStorage的意义 首先获取它是为了将获得的信息输出或者alert():让人容易看到, 其次,在静态页面中,如果使用sessionStorage就相当于在动态页面里连接了数据库一样 例如:我上一篇所做的为button按钮添加回车事件的项目中所用到的可以使用js中的sessionStorage获取页面输入的信息,也可以获得后台计算所得的数据,并且显示出来. 废话不多说,看代码重要: 具体实现 <script type="text/javascript">

  • 通过封装scroll.js 获取滚动条的值

    具体代码如下所示: function Obj(){} Obj.prototype={ scroll:function(){ /* 主要是做兼容处理 这里必须时!=null 因为默认值和每次滚动的时侯 都可以值为0 但是 if(0)为假 所以就只要不为null 就执行 */ if(window.pageYOffset!=null){ /*IE9 和其他标准浏览器*/ return { left:window.pageXOffset, top:window.pageYOffset } } /*声明了

  • Vue.js获取手机系统型号、版本、浏览器类型的示例代码

    1.index.html引入 <script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.4/mobile-detect.min.js"> </script> 2.直接用 <script> //判断数组中是否包含

  • js获取下拉列表的值和元素个数示例

    js获取下拉列表框元素的个数 复制代码 代码如下: <!DOCTYPE html><html><head><script>function getLength(){alert(document.getElementById("mySelect").length);//元素个数}</script></head><body> <form><select id="mySelect&

  • js获取ajax返回值代码

    复制代码 代码如下: z = $.ajax({url:"__URL__/add/",type:'POST',dataType:"json",async:false,cache:false,data:"step=ajax&ajax_type=checkEmail&email="+email,}).responseText;

随机推荐