v-text和v-html的区别


 一、v-text

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

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

 二、v-html

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

 <p v-text=“message”></p>  
<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不仅可以渲染数据,而且可以解析标签。 


免责声明!

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



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