Vue学习之路第四篇:v-html指令


上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上:

1、插值表达式

2、v-text指令

但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如展示内容为:<h1>这是一个h1元素内容</h1>。我们先用插值表达式和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>

运行结果,如下:

结论:插值表达式和v-text指令被直接解析为了字符串元素。对此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>

运行结果:

成功的解析了标签属性。大家也可以尝试定义样式属性看看,如下:

var vm = new Vue({
            el : "#app",
            data : {
                msg : "<h1 style='color:red'>这是一个h1元素内容</h1>"
            }
});

 

每天进步一点点!

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM