vue中v-text / v-html使用實(shí)例代碼詳解

更新時(shí)間：2019年04月02日 14:47:31 作者：yangzailu

這篇文章主要介紹了vue中v-text / v-html使用實(shí)例代碼詳解,非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

廢話(huà)少說(shuō)，代碼如下所述：

<!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>通過(guò)雙括號(hào)綁定</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>通過(guò)雙括號(hào)綁定</span>",
　　　　html: "<span>html標(biāo)簽在渲染的時(shí)候被解析</span>",
　　　　text: "<span>html標(biāo)簽在渲染的時(shí)候被源碼輸出</span>",
　　}
 });
</script>

區(qū)別：

{{message}}：將數(shù)據(jù)解析為純文本，不能輸出真正的html，在頁(yè)面加載時(shí)顯示{{}}，所以通常使用v-html和v-text代替，且花括號(hào)方式在以后可能被取消

v-html="html"：輸出真正的html

v-text="text"：將數(shù)據(jù)解析為純文本，不能輸出真正的html，與花括號(hào)的區(qū)別是在頁(yè)面加載時(shí)不顯示{{}}

總結(jié)

以上所述是小編給大家介紹的vue中v-text / v-html使用實(shí)例代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

vue.js響應(yīng)式原理解析與實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue.js響應(yīng)式原理解析與實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-08-08
vuex實(shí)現(xiàn)購(gòu)物車(chē)的增加減少移除
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車(chē)的增加減少移除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
Vue.Draggable拖拽功能的配置使用方法
這篇文章主要為大家詳細(xì)介紹了Vue.Draggable拖拽功能配置使用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
深入理解Vue Computed計(jì)算屬性原理
Computed 計(jì)算屬性是 Vue 中常用的一個(gè)功能，本篇文章主要介紹了Vue Computed 計(jì)算屬性原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue中使用ts配置的具體步驟
這篇文章主要介紹了vue中使用ts配置的具體步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue下載不同文件的幾種方式總結(jié)
在Vue項(xiàng)目中實(shí)現(xiàn)文件下載有多種方式,包括使用window.open、<a>標(biāo)簽、axios、FetchAPI、自定義$download方法以及創(chuàng)建a標(biāo)簽等,每種方法都有其適用場(chǎng)景,開(kāi)發(fā)者可以根據(jù)項(xiàng)目需求選擇最合適的方式
2025-01-01
vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)示例
本篇文章主要介紹了vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
Vue編寫(xiě)炫酷的時(shí)鐘插件
這篇文章主要為大家詳細(xì)介紹了Vue編寫(xiě)炫酷的時(shí)鐘插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
vue搜索和vue模糊搜索代碼實(shí)例
這篇文章主要介紹了vue搜索和vue模糊搜索，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue2打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法
本篇文章將介紹使用Vue2開(kāi)發(fā)前后端分離項(xiàng)目時(shí),前端打包部署后可動(dòng)態(tài)修改后端接口地址的解決方法,文中通過(guò)圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07