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

当我们需要在 Vue.js 中获取 HTML 标签上的 data-* 属性值时，我们可以通过以下两种方式实现：

方式一：在模板中使用

我们可以在 HTML 模板中使用 v-bind 指令或简写的 : 符号将 data-* 属性值绑定到 Vue.js 实例的数据对象中，然后通过数据对象的属性获取值。

HTML 模板代码：

<div id="app">
  <button v-on:click="alertMessage" data-value="Hello, Vue.js!">点击弹出信息</button>
</div>

Vue.js 实例代码：

var app = new Vue({
  el: '#app',
  methods: {
    alertMessage: function(event) {
      var message = event.target.dataset.value;
      alert(message);
    }
  }
});

在这个示例中，我们可以在按钮上添加 data-value 属性来存储信息，并且将其绑定到方法中的 event.target 数据对象上，通过 dataset 属性获取 data-value 属性的值并弹出。

方式二：使用 $refs

我们还可以使用 Vue.js 的 $refs，在 HTML 模板中给需要获取 data- 属性的元素添加 ref 属性，然后通过 Vue.js 实例的 $refs 对象直接获取 data- 属性的值。

HTML 模板代码：

<div id="app">
  <button v-on:click="alertMessage" ref="messageButton" data-value="Hello, Vue.js!">点击弹出信息</button>
</div>

Vue.js 实例代码：

var app = new Vue({
  el: '#app',
  methods: {
    alertMessage: function() {
      var messageButton = this.$refs.messageButton;
      var message = messageButton.dataset.value;
      alert(message);
    }
  }
});

在这个示例中，我们可以通过在按钮上添加 ref 属性，然后在方法中使用 $refs 对象来获取按钮元素，最后通过 dataset 属性获取 data-value 属性值并弹出。

注意，使用 $refs 只能在 Vue.js 实例已经完成渲染后才能生效。因此，在实际开发中，最好使用第一种方式来获取 data-* 属性的值。