码迷,mamicode.com
首页 > Web开发 > 详细

v-text和v-html的区别

时间:2020-09-07 19:22:14      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:sage   asc   rip   message   cells   app   指令   element   aci   

 一、v-text

  用于渲染普通文本,无论何时,绑定的数据对象上 msg属性发生了改变,插值处的内容都会更新。

1
2
3
<span v-text="message"></span>
<!-- 简写方式 -->
<span>{{message}}</span>
export default { data () { return { message: "这里可以包含html标签" } } }

 二、v-html

 如果你想输出真正的 HTML,你需要使用 v-html指令,v-text仅渲染标签,不能解析 HTML 代码。

1
2
3
4
5
6
7
8
9
<p v-text=“message”></p>  <br> <p v-html="message"></p>
   <script type="text/javascript">
       var app = new Vue({
       el: ‘#app‘//element
       data: {
            message: ‘<strong>Hello</strong> Vue!‘,
           }
       })
   </script>

v-text展示效果:  <strong>Hello</strong> Vue!

v-html展示效果: Hello Vue!

  总结:v-text和{{}}表达式渲染数据,不解析标签。

     v-html不仅可以渲染数据,而且可以解析标签。

v-text和v-html的区别

标签:sage   asc   rip   message   cells   app   指令   element   aci   

原文地址:https://www.cnblogs.com/huxiuxiu/p/13576504.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!