快捷導(dǎo)航

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>通過雙括號(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>通過雙括號(hào)綁定</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代替，且花括號(hào)方式在以后可能被取消

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

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

總結(jié)

以上所述是小編給大家介紹的vue中v-text / v-html使用實(shí)例代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(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)呢,對(duì)vue el-table單元格相關(guān)知識(shí)感興趣的朋友一起看看吧
2023-11-11
elementUI踩坑記錄-el-table問題
這篇文章主要介紹了elementUI踩坑記錄-el-table問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue密碼登陸加密RSA實(shí)現(xiàn)方案
這篇文章主要介紹了Vue密碼登陸加密RSA實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue vxe-table使用問題收錄小結(jié)
這篇文章主要為大家介紹了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ái)管理系統(tǒng)中，對(duì)不同業(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à)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue2中插槽(slot)的基本使用規(guī)范
插槽（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à)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
在Vue3中實(shí)現(xiàn)拖拽文件上傳功能的過程詳解
文件上傳是我們?cè)陂_發(fā)Web應(yīng)用時(shí)經(jīng)常遇到的功能之一,為了提升用戶體驗(yàn),我們可以利用HTML5的拖放API來實(shí)現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
2023-12-12