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中定义的方法。
关注公众号：程序新视界，一个让你软实力、硬技术同步提升的平台
除非注明，否则均为程序新视界原创文章，转载必须以链接形式标明本文链接
