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

不与天斗姜大夫

6511人浏览 · 2020-06-08 16:18:22

不与天斗姜大夫 · 2020-06-08 16:18:22 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^