vue中v-text / v-html使用實(shí)例代碼詳解
更新時(shí)間：2019年04月02日 14:47:31 作者：yangzailu
這篇文章主要介紹了vue中v-text / v-html使用實(shí)例代碼詳解,非常不錯(cuò)，代碼簡單易懂，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
廢話少說，代碼如下所述：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue實(shí)例中的數(shù)據(jù),事件和方法</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="root">
<h1 v-text="number"></h1>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
msg: "world",
number:123
}
})
</script>
</body>
</html>
顯示123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue實(shí)例中的數(shù)據(jù),事件和方法</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="root">
<h1 v-html="content"></h1>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
content: "<h1>hello world</h1>",
}
})
</script>
</body>
</html>
補(bǔ)充：vuejs {{}}，v-text 和 v-html的區(qū)別
<div id="app">
<p>{{message}}</p> <!-- 輸出：<span>通過雙括號綁定</span> -->
<p v-html="html"></p> <!-- 輸出：html標(biāo)簽在渲染的時(shí)候被解析 -->
<p v-text="text"></p> <!-- 輸出：<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span> -->
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>通過雙括號綁定</span>",
html: "<span>html標(biāo)簽在渲染的時(shí)候被解析</span>",
text: "<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span>",
}
});
</script>
區(qū)別：
{{message}}：將數(shù)據(jù)解析為純文本，不能輸出真正的html，在頁面加載時(shí)顯示{{}}，所以通常使用v-html和v-text代替，且花括號方式在以后可能被取消
v-html="html"：輸出真正的html
v-text="text"：將數(shù)據(jù)解析為純文本，不能輸出真正的html，與花括號的區(qū)別是在頁面加載時(shí)不顯示{{}}
總結(jié)
以上所述是小編給大家介紹的vue中v-text / v-html使用實(shí)例代碼詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！
相關(guān)文章
vue中 el-table每個(gè)單元格包含多個(gè)數(shù)據(jù)項(xiàng)處理
vue項(xiàng)目中,我們需要在el-table中顯示數(shù)組數(shù)據(jù),有的時(shí)候,需要在一個(gè)單元格中顯示多條數(shù)據(jù),如何實(shí)現(xiàn)呢,對vue el-table單元格相關(guān)知識感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了elementUI踩坑記錄-el-table問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue密碼登陸加密RSA實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了Vue vxe-table使用問題收錄小結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue實(shí)現(xiàn)兩種路由權(quán)限控制方式
路由權(quán)限控制常用于后臺管理系統(tǒng)中，對不同業(yè)務(wù)人員能夠訪問的頁面進(jìn)行一個(gè)權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制，具有一定的參考價(jià)值，感興趣的可以了解一下2021-10-10
解決antd Form 表單校驗(yàn)方法無響應(yīng)的問題
這篇文章主要介紹了解決antd Form 表單校驗(yàn)方法無響應(yīng)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
插槽（Slot）是Vue提出來的一個(gè)概念,正如名字一樣,插槽用于決定將所攜帶的內(nèi)容,插入到指定的某個(gè)位置,從而使模板分塊,具有模塊化的特質(zhì)和更大的重用性,下面這篇文章主要給大家介紹了關(guān)于vue2中插槽(slot)的基本使用規(guī)范的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue移動(dòng)端項(xiàng)目vant組件庫之tag詳解
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目vant組件庫之tag詳解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue3中實(shí)現(xiàn)拖拽文件上傳功能的過程詳解
文件上傳是我們在開發(fā)Web應(yīng)用時(shí)經(jīng)常遇到的功能之一,為了提升用戶體驗(yàn),我們可以利用HTML5的拖放API來實(shí)現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-12-12