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