首页 > Web开发 > 详细

v-html | 展示数据包含元素标签或者样式怎样在前端渲染

时间:2021-03-01 11:49:16      阅读:53      评论:0      收藏:0      [点我收藏+]

问题

如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染

插值表达式{{}}v-text指令被直接解析为了字符串元素。

<body>
    <div id="app">
        <p v-cloak>{{ msg }}</p>
        <p v-text="msg"></p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "<h1>这是一个h1元素内容</h1>"
            }
        });
    </script>
</body>
技术分享图片

解决方法

对此Vue提供了另外一个指令:v-html

<div id="app">
        <p v-cloak>{{ msg }}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "<h1>这是一个h1元素内容</h1>"
            }
        });
    </script>
技术分享图片

v-html | 展示数据包含元素标签或者样式怎样在前端渲染

原文:https://www.cnblogs.com/silloutte/p/14462108.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!