v-html怎么实现动态绑定

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        var vm = new Vue({
            data: {
                str: "str",
                html: "html"
            },
            methods: {
                click: function () {
                    console.log("xxx")
                }
            }
        })
        window.onload = function () {
            vm.$mount(document.body)
            setTimeout(function () {
                vm.html = '<div v-text="str"></div>'
            }, 1000)
            setTimeout(function () {
                vm.html = '<button v-el:button v-on:click="click">click me</button>'
            }, 2000)
        }
    </script>
</head>
<body v-html="html">
</body>
</html>

vue.js

阅读 33.6k

6 个回答

得票最新

QuietCoder

241611

发布于
2016-09-08

有没有人能解答。。

theWalker

3k2211

发布于
2016-09-08

更新于
2016-09-08

v-html就是这么绑定的，没get到你的问题。
v-html

三哥好威武

21161118

发布于
2016-09-08

这个本来就是动态绑定的啊，而且我很好奇，你为什么要这样实现，你做两个不同的组件来切换不就行了吗

linvic

94439

发布于
2018-06-15

请问题主解决了吗，是否有方法

懂点君

23319

发布于
2017-06-08

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="https://css.h5course.cn/reset-1.0.0.css" />
</head>
<body>
<div class="wrap" id="app">
    <button @click.prevent="addNodesFn">点击我呀</button>
    <div v-html="rawHtml"></div>
</div>
<script src="https://js.h5course.cn/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            rawHtml: '\
                        <div>\
                            <h2>梦幻雪冰</h2>\
                            <p>不懂后端的前端开发工程师</p>\
                        </div>\
                        '
        },
        methods: {
            addNodesFn: function() {
                this.rawHtml += this.rawHtml;
            }
        }
    });
</script>
</body>
</html>

结果

图片描述

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

v-html怎么实现动态绑定

代码

结果

你尚未登录，登录后可以

不同页面之间可以通过localstorage保存响应式吗？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

相同的HTML代码，用v-html与直接写在模板中染相表现差异巨大，如何规避？

vite项目如何导入.pem公钥更规范？

移动端切换路由后返回，视频启动播放会严重滞后，好怪？

请问前端小票打印各位是怎么做的？