JS中拼接VUE的ONCLICK事件

最新推荐文章于 2024-05-28 14:53:08 发布

不与天斗8866

最新推荐文章于 2024-05-28 14:53:08 发布

阅读量6.4k

点赞数 2

分类专栏：前端相关文章标签： vue

原文链接：https://www.choupangxia.com/2020/04/19/js-vue-onclick/

版权

前端相关专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

不与天斗8866

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
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..
复制链接

扫一扫

专栏目录