Vue的模板语法（3-3）

最新推荐文章于 2025-06-21 20:52:07 发布

罗彬桦

最新推荐文章于 2025-06-21 20:52:07 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_45647118/article/details/113830615

Vue 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了Vue中v-text和v-html的使用及其区别。v-text将绑定的数据直接显示，而v-html则会解析并显示HTML标签。通过示例代码展示了不同情况下两者的输出效果，帮助开发者更好地理解和选择合适的模板语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的模板语法

赋值呢，常用的就那3种，但是你一定要知道它们之间的区别。
知识点：

字符串拼接
v-text
v-html

v-text呢，是将绑定的数据直接赋值进去。
v-html呢，如果值有标签，那么会显示标签的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./vue.js'></script>
</head>
<body>
    <div id="app">
        {{name + ' LEE'}}
        <div v-text="name + ' LEE'"></div>
        <div v-html="name + ' LWW'"></div>
    </div>    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                name: "Dell"
                // name: "<h1>Dell</h1>"
            }
        })
    </script>
</body>
</html>