Vue（v-text和v-html同与异）

最新推荐文章于 2023-07-12 23:30:59 发布

Mr顺

最新推荐文章于 2023-07-12 23:30:59 发布

阅读量1.2k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_46144237/article/details/109562080

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

v-text和v-html同与异

v-text
重点：作用设置文本
1.v-text指令的作用是：设置标签的内容(textContentt)
2. 默认写法会替换全部内容，使用差值表达式{{}} ,可以替换指定内容
3.内部支持写表达式

v-html
重点：解析a标签
1.v-html指令的作用是：设置元素的 innerHTML
2 .内容中有html结构会被解析为标签
3.v-text指令无论内容是什么，只会解析为文本
4.解析文本使用v-text，需要解析html 结构使用 v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message">海绵宝宝</h2>
        <h2 v-text="info+'!'">派大星</h2>
        <h2>{{message+'!'}}海绵宝宝</h2>
        
        <!-- 下面是对比：v-text和 v-html的代码 -->
        <p v-text="content"></p>
        <p v-html="content"></p><!-- 在不牵到HTML的时候，二者几乎相同 -->
        
        <!-- 不同 -->
        <p v-text="content1"></p>
        <p v-html="content1"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello v-text!!!",
                info:"study is easy!",

                //下面的数据是为了测试 v-html使用的
                content:"hello v-text and v-html",
                content1:"<a href='www.baidu.com'>hello v-text and v-html</a>"
            }
        })
    </script>
    
</body>
</html>