JS中拼接VUE的ONCLICK事件

刺骨的言语ヽ痛彻心扉 2023-02-16 05:51 38阅读 0赞

本文为转载，原文地址：[https://www.choupangxia.com/2020/04/19/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">
    
        </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事件。查看生成的页面元素显示如下：

很显然并没有正常解析。那么，直接写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中定义的方法。

[https_www.choupangxia.com_2020_04_19_js-vue-onclick]: https://www.choupangxia.com/2020/04/19/js-vue-onclick/