vue中{{}},v-text和v-html的區(qū)別有什么

發(fā)布時(shí)間：2021-09-09 12:48:44 來源：億速云閱讀：388 作者：小新欄目：開發(fā)技術(shù)

小編給大家分享一下vue中{{}},v-text和v-html的區(qū)別有什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

<!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 href='https://www.baidu.com'>點(diǎn)擊進(jìn)入百度</a>",
            addr2:'<a href="https://www.baidu.com" rel="external nofollow" >百度</a>'
        }
    });
</script>

以上是“vue中{{}},v-text和v-html的區(qū)別有什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

vue中{{}},v-text和v-html的區(qū)別有什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽