vue中{{}},v-text和v-html區別與應用詳解

阿新 • • 發佈：2021-09-10

{{}}獲取值，不會清空標籤原有內容
v-text 獲取值，會清空標籤原有內容，輸出的是純文字
v-html 獲取值，會清空標籤原有內容，若資料中包含html標籤，將其當html標籤解析後輸出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>KvexMQI;
</head>
<body>
<div id="app">

    <p>上午好{{info}}</p>
    <p v-text="info">上午好</p&gwww.cppcns.com 
t;
    <p v-html="info">上午好</p>
    <hr>
    <p v-text="addr">hhh</p>
    <p v-html="addr">hhh</p>
    <hr>
    <p v-text="addr2">hhh</p>
    <p v-html="addr2">hhh</p>
</div>

</bohttp://www.cppcns.comdy>
</html>KvexMQI;
<script src="/.js"></script>
<script>
    new Vue({
        el:"#app",data:{
            info:"good",addr:"<a href='https://www.baidu.com'>點選進入百度</a>",addr2:'<a href="https://www.baidu.com" rel="external nofollow" >百度</a> 
'
        }
    });
</script>

在這裡插入圖片描述

到此這篇關於vue中{{}},v-text和v-html區別與應用詳解的文章就介紹到這了,更多相關vue中{{}},v-text和v-html區別與應用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

vue中{{}},v-text和v-html區別與應用詳解

{{}}獲取值，不會清空標籤原有內容 v-text 獲取值，會清空標籤原有內容，輸出的是純文字

java中的前++和後++的區別示例程式碼詳解

java中的前加加++和後加加++，有很多人搞的很暈，不太明白！今天我舉幾個例子說明下前++和後++的區別！

Vue中Router路由兩種模式hash與history詳解

hash 模式 (預設) 工作原理: 監聽的hash值變化 —> onhashchange事件,獲取location.hash

Vue中{{}}、v-text和v-html

技術標籤：Vue 區別： {{}}和v-text會將元素當成純文字輸出v-html會將元素當成html標籤解析後輸出(即:可以識別元素中的標籤)

v-text和v-html的區別

　一、v-text 　　用於渲染普通文字，無論何時，繫結的資料物件上msg屬性發生了改變，插值處的內容都會更新。

分析 Vue 中的 computed 和 watch 的區別

目錄一、computed介紹1.1、get 和 set 用法1.2、計算屬性快取二、watch介紹三、兩者區別3.1、對於 computed3.2、對於 watch四、應用場景一、computed介紹

MySQL中datetime和timestamp的區別及使用詳解

一、MySQL中如何表示當前時間？其實，表達方式還是蠻多的，彙總如下： CURRENT_TIMESTAMP

python3中的eval和exec的區別與聯絡

看了很多網上的方法，寫入檔案後開啟檔案看確實不再是亂碼，但是從檔案中讀入json時發現了亂碼，可能是讀檔案預設的編碼格式不對。下面讀寫方法可行。

詳解Java中方法next()和nextLine()的區別與易錯點

1、基本語法 1.1基本使用方法本篇部落格重點nextLine()會讀取換行(\'\\r\')，但是不會進行輸出。

Springboot @Validated和@Valid的區別及使用詳解

概述： @Valid是使用Hibernate validation的時候使用 @Validated是隻用Spring Validator校驗機制使用

PHP中abstract(抽象)、final(最終)和static(靜態)原理與用法詳解

本文例項講述了PHP中abstract(抽象)、final(最終)和static(靜態)原理與用法。分享給大家供大家參考，具體如下：

在vue中封裝方法以及多處引用該方法詳解

步驟： 1.先建立一個檔案，放你想封裝的方法；然後匯出；部分程式碼：注：匯出這個地方需要特別注意：如果是一個物件的話：export 物件；如果是一個函式的話：export { 函式 }

VUE中滑鼠滾輪使div左右滾動的方法詳解

前言技術點： addEventListener/attachEvent(傳遞引數) 功能描述：滑鼠停在div中，若div有x軸滾動條，則滑鼠滾輪控制x軸滾動條橫向滾動

Vue中插槽slot的使用方法與應用場景詳析

什麼是插槽？我們知道在vue中 Child 元件的標籤的中間是不可以包著什麼的。

vue中watch的handler，deep，immediate用法詳解

我們使用watch監聽資料時，有三個選項，handler，deep，immediate handler 我們平時的寫法，就預設寫的是handler，vue.js會處理這個邏輯，最終編譯出來就是這個handler（可參考我上篇文章的watch）

Spring的組合註解和元註解原理與用法詳解

本文例項講述了Spring的組合註解和元註解原理與用法。分享給大家供大家參考，具體如下：

Java分支結構和迴圈結構原理與用法詳解

本文例項講述了Java分支結構和迴圈結構。分享給大家供大家參考，具體如下：

Pyecharts 動態地圖 geo()和map()的安裝與用法詳解

把一些地域性比較明顯的資料顯示在一張地圖上，遠比給別人一個 Excel 檔案好得多。

JavaScript物件字面量和建構函式原理與用法詳解

本文例項講述了JavaScript物件字面量和建構函式。分享給大家供大家參考，具體如下：

MySQL 8.0使用者和角色管理原理與用法詳解

本文例項講述了MySQL 8.0使用者和角色管理。分享給大家供大家參考，具體如下：