快捷導(dǎo)航

vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解

更新時間：2021年09月09日 10:26:49 作者：栗栗本栗

這篇文章主要介紹了vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下

{{}}獲取值，不會清空標簽原有內(nèi)容
v-text 獲取值，會清空標簽原有內(nèi)容，輸出的是純文本
v-html 獲取值，會清空標簽原有內(nèi)容，若數(shù)據(jù)中包含html標簽，將其當html標簽解析后輸出

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

    <p>上午好{{info}}</p>
    <p v-text="info">上午好</p>
    <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>

</body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            info:"good",
            addr:"<a ,
            addr2:'<a  rel="external nofollow" >百度</a>'
        }
    });
</script>

在這里插入圖片描述

到此這篇關(guān)于vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解的文章就介紹到這了,更多相關(guān)vue中{{}},v-text和v-html區(qū)別與應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue3?elementPlus?table實現(xiàn)列寬可拖拽功能
這篇文章主要介紹了vue3?elementPlus?table實現(xiàn)列寬可拖拽功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
vue中數(shù)組常用的6種循環(huán)方法代碼示例
在vue項目開發(fā)中,我們需要對數(shù)組進行處理等問題,這里簡單記錄遍歷數(shù)組的幾種方法,這篇文章主要給大家介紹了關(guān)于vue中數(shù)組常用的6種循環(huán)方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-03-03
vue使用pdf-dist實現(xiàn)pdf預(yù)覽以及水印添加
這篇文章主要為大家詳細介紹了vue如何使用pdf-dist實現(xiàn)pdf預(yù)覽以及水印添加的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
使用vuetify實現(xiàn)全局v-alert消息通知的方法
使用強大的Vuetify開發(fā)前端頁面,結(jié)果發(fā)現(xiàn)官方?jīng)]有提供簡便的全局消息通知組件,所以自己動手寫了一個簡單的組件,接下來通過本文給大家介紹使用vuetify實現(xiàn)全局v-alert消息通知的詳細代碼,感興趣的朋友跟隨小編一起看看吧
2024-02-02
tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法
這篇文章主要介紹了tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法,需要的朋友可以參考下
2006-06-06
vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定）
本篇文章主要介紹了vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定），具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
一文輕松了解v-model及其修飾符
這篇文章主要給大家介紹了關(guān)于v-model及其修飾符的相關(guān)資料,v-model指令有三個可以選用的修飾符：.lazy、.number以及.trim,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2021-11-11
vue日歷/日程提醒/html5本地緩存功能
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
vue開發(fā)中后臺系統(tǒng)復(fù)雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺系統(tǒng)復(fù)雜表單的優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
vue使用video插件vue-video-player詳解
這篇文章主要為大家詳細介紹了vue使用video插件vue-video-player，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10