Vue-v-text和v-html的使用

最新推荐文章于 2024-06-25 11:16:05 发布

文文鑫

最新推荐文章于 2024-06-25 11:16:05 发布

阅读量1.5k

点赞数

分类专栏： vue-前后端分离文章标签： vue

本文链接：https://blog.csdn.net/dgssd/article/details/111033634

版权

vue-前后端分离专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.v-text：用来获取data中数据将数据已文本的形式渲染到指定标签内部，类似于javascript中的innerText
{{}}（插值表达式）与v-text的区别：
a.v-tetx取值会将标签中原有的数据覆盖，使用插值表达式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境比较差的情况下出现插值闪烁

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

<div id="app">
    <span>{{msg}},admin！</span>
    <br>
    <span v-text="msg">就是就是的就是</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            msg:"你好"

        }
    })
</script>
</body>
</html>

在这里插入图片描述
2.v-html：用来获取data中的数据，将数据中含有的HTML标签先解析再渲染到指定标签的内部，类似JavaScript中的innerHTML。

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

<div id="app">
    <span>{{msg}},admin！</span>
    <br>
    <span v-text="msg">就是就是的就是</span>
    <span>{{message}}</span>
    <br>
    <span v-html="message">三生三世</span>//v-html也会覆盖标签原始的值


</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            msg:"你好",
            message:"<a href='vue01.html'>百度一下</a>"

        }
    })
</script>
</body>
</html>