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ū)別是在頁面加載時不顯示{{}}
總結
以上所述是小編給大家介紹的vue中v-text / v-html使用實例代碼詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
這篇文章主要為大家詳細介紹了vue.js響應式原理解析與實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要為大家詳細介紹了vuex實現(xiàn)購物車的增加減少移除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細介紹了Vue.Draggable拖拽功能配置使用的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Computed 計算屬性是 Vue 中常用的一個功能，本篇文章主要介紹了Vue Computed 計算屬性原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue中使用ts配置的具體步驟，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在Vue項目中實現(xiàn)文件下載有多種方式,包括使用window.open、<a>標簽、axios、FetchAPI、自定義$download方法以及創(chuàng)建a標簽等,每種方法都有其適用場景,開發(fā)者可以根據(jù)項目需求選擇最合適的方式2025-01-01
vue學習之mintui picker選擇器實現(xiàn)省市二級聯(lián)動示例
本篇文章主要介紹了vue學習之mintui picker選擇器實現(xiàn)省市二級聯(lián)動示例，非常具有實用價值，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了Vue編寫炫酷的時鐘插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue搜索和vue模糊搜索，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Vue2打包部署后可動態(tài)修改后端接口地址的解決方法
本篇文章將介紹使用Vue2開發(fā)前后端分離項目時,前端打包部署后可動態(tài)修改后端接口地址的解決方法,文中通過圖文結合的方式介紹的非常詳細,需要的朋友可以參考下2024-07-07