JS中拼接VUE的ONCLICK事件

本文为转载，原文地址：https://www.choupangxia.com/2020/04/19/js-vue-onclick/ ，非常感谢原作者

正常情况下，我们使用@click属性便可对HTML元素绑定onclick事件，完整示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue属性绑定</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div id="app2"><button type="button" @click="test">点击测试</button></div><script type="text/javascript">var app = new Vue({el: '#app2',data: {message: '页面加载于 ' + new Date().toLocaleString()},methods:{test:function () {alert("测试一下");}}})</script></body>
</html>

在button元素上通过@click绑定了vue中定义的test方法，当点击该button时，便会弹出提示框“测试一下”。

此时，如果button相关的组件的内容是动态生成的，也就是说是临时拼接的，此时再使用@click指定事件是无效的。示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue属性绑定</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div id="app2">
<!--        <button type="button" @click="test">点击测试</button>--></div><script type="text/javascript">var app = new Vue({el: '#app2',data: {message: '页面加载于 ' + new Date().toLocaleString()},methods:{test:function () {alert("测试一下");}}})function getButton() {var html = '<button type="button" @click="test">点击测试</button>';document.getElementById("app2").innerHTML = html;}getButton();</script></body>
</html>

这里，虽然button按钮也能够正常显示，但是无法绑定onclick事件。查看生成的页面元素显示如下：

<div id="app2">
<button type="button" @click="test">点击测试</button>
</div>

很显然并没有正常解析。那么，直接写onclick事件是否能够实现呢？

function getButton() {var html = '<button type="button" onclick="test">点击测试</button>';document.getElementById("app2").innerHTML = html;
}

将getButton中拼接的@click替换为onclick，但是执行时会提示“ReferenceError: test is not defined”。

那么再进一步改造，如下：

function getButton() {var html = '<button type="button" onclick="app.test()">点击测试</button>';document.getElementById("app2").innerHTML = html;
}

在上述代码中，事件绑定通过onclick进行绑定，而事件内容则通过定义的vue的变量app.test()方法来进行指定。注意此处test是方法，后面有括号。

经过上述的改造，便可以支持拼接字符串的形式来动态绑定vue中定义的方法。

JS中拼接VUE的ONCLICK事件相关推荐

js中的click和onclick事件区别
1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 2.click本身是方法,作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件
form表单的action提交写到js中来，同时onclick事件也写在js中来。其action也可以通过ajax来提交的。...
假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提升技术之旅吧,详情 ...
js中拼接字符串遇到的单引号、双引号以及转义字符问题
项目中经常遇到对ajax提交后返回的结果动态显示在页面上,这时候就需要在js中进行字符串的拼接.额...其实普通的拼接字符串并没多大难度系数,只要保证单引号和双引号相间就可以了.但是,如果在拼接字符串 ...
关于js中无法绑定点击事件
在js文件中添加点击事件失败,但是HTML中onclick就能成功. 解决办法:将js的引用的script标签放到</body>的后面.这样在页面渲染之后再执行js代码.
js中调用vue中的方法
1.在vue的钩子函数中将需要调用的函数赋值给window. mounted() {//将Vue方法传到全局对象window中window.updateSocket = this.onSubmit; ...
在php中焦点事件,Js中的onblur和onfocus事件（图文教程）
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...
Js中的onblur和onfocus事件
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...
使用Docker部署Node.js中的Vue项目
1.准备工作使用服务器:阿里云服务器系统:CentOS 7 项目配置准备好一个项目该项目下有以下文件对 package.json 文件进行修改设置项目启动的端口号和使用的ip 注:在修改p ...
js中unload什么意思_javascript事件之卸载(unload)事件
之前我们介绍过:javascript 卸载前beforeunload事件 ,今天为大家介绍下卸载(unload)事件. 在javascript中,与load事件对应的是unload事件,这个事件在文档 ...
js中拼接字符串莫名出现NAN
今天在写一个电影上拉菜单加载更多数据时,遇到一个bug,网络怎么也连不通,debugger后发现网址在拼接的时候变成了NAN类型数据出错情况: 解决方法: 如果使用+号来进行字符串拼接时,尽量不要在 ...

JS中拼接VUE的ONCLICK事件

JS中拼接VUE的ONCLICK事件相关推荐

最新文章

热门文章