初识 Vue（08）---(模板语法)

姜皓

于 2018-07-25 23:06:27 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue # 从浅入深学 Vue

本文链接：https://blog.youkuaiyun.com/jianghao233/article/details/81211458

Vue 同时被 2 个专栏收录

28 篇文章

订阅专栏

从浅入深学 Vue

28 篇文章

订阅专栏

本文详细介绍了Vue.js中三种常见的模板语法：差值表达式、v-text和v-html的使用方法及实例。通过这些语法可以轻松实现数据的绑定与显示。

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

模板语法

1.差值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        {{name}}
        </div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                name:'Dell'
            },
       })  
    </script>   
</body>
</html>

差值表达式就是格式如 {{ }}

输出：

2.v-text

换一种写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
       <div v-text="name"></div>
        </div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                name:'Dell'
            },
       })  
    </script>   
</body>
</html>

输出：

3.v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        {{name}}
       <div v-text="name"></div>
       <div v-html="name"></div>
        </div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                name:'<h1>Dell</h1>'
            },
       })  
    </script>   
</body>
</html>

输出：