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

最新推荐文章于 2024-08-16 07:34:20 发布

云焰

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量4.2k

点赞数 3

分类专栏： Web开发

本文链接：https://blog.csdn.net/yan_dk/article/details/109352118

版权

Web开发专栏收录该内容

65 篇文章 2 订阅

订阅专栏

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标签，然后的重点代码是