vue：v-text、v-html与模板{{}}的区别

最新推荐文章于 2024-03-07 00:15:00 发布

H_x

最新推荐文章于 2024-03-07 00:15:00 发布

阅读量260

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43650979/article/details/105683650

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了Vue中v-text、v-html指令与模板插值{{}}的区别。v-html用于覆盖内容并解析HTML，v-text覆盖内容但不解析HTML，而{{}}则将数据插入不覆盖原有内容且不解析HTML。

摘要由CSDN通过智能技术生成

vue：v-text、v-html与模板{{}}的区别

v-html: 会覆盖原有的内容,并且会解析数据中的html；
v-text: 会覆盖原有的内容,并且不会解析数据中的html；
{{}}插值: 将指定的数据插入到指定位置,不覆盖原有的内容，并且不会解析数据中的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--v-html: 会覆盖原有的内容,并且会解析html-->
    <p v-html="html">1</p>
    <p v-html="text">1</p>
    <!--v-text: 会覆盖原有的内容,并且不会解析html-->
    <p v-text="html">2</p>
    <p v-text="text">2</p>
    <!--{{}}插值: 将指定的数据插入到指定位置,不覆盖原有的内容，并且不会解析html-->
    <p>3 {{html}}</p>
    <p>3 {{text}}</p>
</div>
<script src="../js/vue.min.js"></script>
<script>
    let vue = new Vue({
      el:'#app',
      data:{
        html:'<span>标签内容</span>',
        text:'这里是text'
      }
    })
</script>

</body>
</html>