VUE的click事件在html中可能失效的问题解决方法
VUE作为一种视图模型的解决方案，不同于jquery的对dom结构处理的解决方案。vue组件在项目中运用时，按常规控件（比如标签@click）的使用方法都能正常执行，可能有时也会遇到各种问题。比如html页面中控件是可能需要动态生成的，那么直接使用标签@click的字符串来拼接html生成页面，页面是不能正常解析标签@click的，我们看到vue项目的“标签@click“，在最后页面实际展现后，是
VUE作为一种视图模型的解决方案，不同于jquery的对dom结构处理的解决方案。vue组件在项目中运用时，按常规控件（比如标签@click）的使用方法都能正常执行，可能有时也会遇到各种问题。比如html页面中控件是可能需要动态生成的，那么直接使用标签@click的字符串来拼接html生成页面，页面是不能正常解析标签@click的，我们看到vue项目的“标签@click“，在最后页面实际展现后，是看不到"@click"，是因为VUE容器加载后，来解析这个控件的click事件相应的。那么我们如何处理这种情况呢。
我们先来看看，用常规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组件方法也能够正常解析了。
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)