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