5.v-text与v-html常见操作

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

彼岸的饭碗

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

阅读量203

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42392049/article/details/116779213

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-html与v-text都是渲染文本的指令，使用场景会有所不同。

我们一般的渲染方法是：

双大括号插值:{{}}
v-text
v-html

浅谈v-text

其中双大括号与v-text渲染内容类似，都是以文本类型进行编译。

<p>{{a}}</p>
<p v-text="a"></p>

结果：
在这里插入图片描述
v-text与双大括号的区别

双大括号在渲染结果之前，隐约会有编译之前的文本显示，v-text是没有这种现象的。
双大括号更灵活，中间是可以添加内容的

例如：

<p>------{{a}}--------</p>
<p v-text="a">----------</p>

在这里插入图片描述

浅谈v-html

双大括号和v-text他俩的渲染方式与v-html有本质不同，v-html会识别模板

<body>
    <div id="app">
        <p>{{a}}</p>
        <p v-text="a"></p>
        <p v-html="a"></p>
    </div>


    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                a:"<h1>我是要插值的内容</h1>"
            },
            methods:{

            }
        })
    </script>
</body>