廢話少說，代碼如下所述：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue實例中的數據,事件和方法</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實例中的數據,事件和方法</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的區別
<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>區別：
{{message}}：將數據解析為純文本，不能輸出真正的html，在頁面加載時顯示{{}}，所以通常使用v-html和v-text代替，且花括號方式在以后可能被取消
v-html="html"：輸出真正的html
v-text="text"：將數據解析為純文本，不能輸出真正的html，與花括號的區別是在頁面加載時不顯示{{}}
總結
以上所述是小編給大家介紹的vue中v-text / v-html使用實例代碼詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
圖片精選
