本文为转载,原文地址: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中定义的方法。