vue读取data-*属性答案

【问题标题】：Vue reading data-* attributevue读取data-*属性
【发布时间】：2019-07-27 05:44:03
【问题描述】：

如何在 VUE 中同步变量“counter”，从 'data-val' 属性读取值？在此示例中，我使用 setTimeout 更改 data-* 属性值。我的解决方案是通过 @mousemove 事件调用 refresh() 方法。

new Vue({
  el: '#app',
  data: {
  	counter: 1
  },
	template: '<div id="wrapper" @mousemove="refresh"><div id="el1" :data-val="counter">Value: {{ counter }}</div></div>',
  watch: {
	  counter: function(val, oldVal){
    	this.counter = val;
    }
  },
methods: {  refresh() { 
           this.counter = document.getElementById('el1').getAttribute("data-val"); 
             }
       }
});

 
var i=1;
timer = setInterval(changeDOM, 1500);
function changeDOM() {
	i++;
  el=document.getElementById('el1');
  el.setAttribute("data-val", i);
  console.log(el.getAttribute("data-val"));
}

#wrapper{
width: 100%;
height: 100%;
background-color: aqua;
position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

【问题讨论】：

标签： javascript vue.js data-binding settimeout custom-data-attribute

【解决方案1】：

有很多方法可以实现你的目标，但如果你想退出 vue 实例，你需要在下面的变量中分配 vue 实例

var app = new Vue({

然后把counter改成app.counter

var app = new Vue({
  el: '#app',
  data: {
  	counter: 1
  },
	template: `<div id="el1" :data-val="counter">
  <div>Value: {{ getCounter }}</div>
  <div><input type="text" v-model="counter"></div>
  </div>`,
  computed: {
	  getCounter: function(val, oldVal){
    	return this.callMethod1(this.counter);
    }
  },
  methods:{
      callMethod1: function(){
         console.log("callMethod1 called with counter value : "+this.counter);
         return this.counter;
      }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

【讨论】：

setTimeout 只是一个例子。我无法影响谁或什么正在更改 data-val 属性（可能是由外部脚本或用户）。我喜欢“观察” VUE 中的 data-val 属性，并在它被更改后调用一个获取实际值的方法。
我已经更新了我的答案，请再次检查。如果此答案不符合您的要求，请在您的问题中添加更多信息。
如果我插入 setTimeout 更改“data-val”属性，它不会与显示的值同步：{{counter}}。
我很抱歉为什么你希望这两种方式和 vue 方式都可以轻松触发。无需使用setTimeout
我对创建 data-* 属性的主脚本没有影响。我只是使用 VUE 编写一个与现有代码一起工作的插件。我现在的解决方案不是很好并且性能很差。我使用的是来调用这个函数：方法：{ refresh() { this.counter = $('#el1').attr('data-val'); } }