vue 插值 v-once,v-text, v-html詳解
更新時間：2018年01月19日 09:17:19 作者：鐘離野
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
引入Vue.js ，通過script形式，vue官網語法記錄
創(chuàng)建vue應用，數據和 DOM 已經被建立了關聯(lián)，所有東西都是響應式的
1：插值
缺點：讓你的網速慢，或者數據加載失敗時，會在瀏覽器中直接渲染插值【js禁用，javascript報錯也會導致這個問題】
html：
<section id="content">
<p id="Mustache">沒有v-once, {{msg}}</p>
</section>
js:
var vm = new Vue({
el:"#content",
data: {
msg: "hello my lord"
}
});
result：
2：v-once:通過使用 v-once 指令,執(zhí)行一次性的插值【當數據改變時，插值處的內容不會繼續(xù)更新】
html:
<section id="content">
插值:
<p id="Mustache">{{msg}}</p>
<p>v-once:當數據改變時，插值處的內容不會更新</p>
<span v-once>{{msg}}</span>
</section>
js:
var vm = new Vue({
el:"#content",
data: {
msg: "hello once"
}
});
result:
3、v-text和v-html
html:
<section id="content"> v-text： <span v-text="tipHtml"></span><br> 原始 HTML:v-html指令 <span v-html="tipHtml"></span> </section>
js:
var vm = new Vue({
el:"#content",
data: {
tipHtml: "<b>小心點，明天</b>"
}
});
結果：
總結：v-text:會把html標簽也解析為文本，而v-html可以解析html標簽。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue-admin-element項目突然就起不來了的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue+Java 通過websocket實現(xiàn)服務器與客戶端雙向通信操作
這篇文章主要介紹了Vue+Java 通過websocket實現(xiàn)服務器與客戶端雙向通信操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue SSR 組件加載問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
Vue項目通過vue-i18n實現(xiàn)國際化方案(推薦)
這篇文章主要介紹了Vue項目通過vue-i18n實現(xiàn)國際化方案,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了如何利用vue3實現(xiàn)6位的密碼輸入框效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學習一下2023-08-08
本篇文章主要介紹了VUE 全局變量的幾種實現(xiàn)方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue線上部署請求接口報錯net::ERR_CONNECTION_REFUSED
vue線上部署請求接口報錯net::ERR_CONNECTION_REFUSED問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
今天小編就為大家分享一篇vuex實現(xiàn)數據狀態(tài)持久化，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章主要介紹了Vue 兄弟組件通信的方法（不使用Vuex），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vite.config.js是Vite框架中的配置文件,用于配置項目的構建和運行時的行為,下面這篇文章主要給大家介紹了關于vite項目vite.config.js詳細配置的相關資料,需要的朋友可以參考下2023-05-05