VUE的click事件在html中可能失效的问题解决方法

VUE作为一种视图模型的解决方案，不同于jquery的对dom结构处理的解决方案。vue组件在项目中运用时，按常规控件（比如标签@click）的使用方法都能正常执行，可能有时也会遇到各种问题。比如html页面中控件是可能需要动态生成的，那么直接使用标签@click的字符串来拼接html生成页面，页面是不能正常解析标签@click的，我们看到vue项目的“标签@click“，在最后页面实际展现后，是

云焰

4387人浏览 · 2020-10-29 10:07:30

云焰 · 2020-10-29 10:07:30 发布

我们先来看看，用常规js标签替换click的解决方法。关于vue组件的js引用文件就不用多说了，直接上代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.min.js"></script>
<title>Vue 测试实例 - </title>


</head>
<body>
<button onclick="add_data()">aaa</button>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  created: function () {
	  let _this=this;
	  window.add_data=_this.add_data;
    },
 methods: {
   add_data:function(){
	  alert(222);
   }
   
 }  
})
</script>
</body>
</html>

我们看到，js直接调用add_data方法，而不是通过@click标签，然后的重点代码是

这句话的意思是，在vue的构造事件中，将window对象的add_data 方法等同于VUE的add_data，这样就可以解决动态调用生成html不能解析@click标签的问题。

接下来的我们生成动态构造html就比较简单了，直接构造“<button οnclick="add_data()">aaa</button>”字符串生成html，vue组件方法也能够正常解析了。

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^