【瑞模网】vue模板语法（差值语法，指令语法）

最新推荐文章于 2025-12-26 15:01:48 发布

原创最新推荐文章于 2025-12-26 15:01:48 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端专栏收录该内容

19 篇文章

订阅专栏

博客介绍了Vue模板语法的两类，一是插值语法（{{}}），用于解析标签体内容，写法为{{xxx}}，可读取data属性；二是指令语法（v - xxx），用于解析标签内容，如v - bind:href或简写形式，xxx为js表达式，也能读取data属性。

Vue模板语法有两类：

1.插值语法（{{}}）

功能：用于解析标签体的内容

写法：{{xxx}},xxx是js表达式，可以直接读取到data中的所有属性

<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="root">
        <h1>差值语法,{{name}}</h1>
        <h3>您好，jack</h3>
       
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'.root',
            data:{
                name:'jack',
                
            }
        })
    </script>
</body>
</html>

2.指令语法（v-xxx）

功能：用于解析标签内容

举例：v-bind:href="xxx" 或者简写为:href="xxx"的形式,xxx同样要写js表达式，并且可以读到data中的所有属性

<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="root">
        <h1>差值语法,{{name}}</h1>
        <h3>您好，jack</h3>
        <h1>指令语法</h1>
        <a v-bind:href="src"></a>
        <!-- v-bind 可以简写为: -->
       
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'.root',
            data:{
                name:'jack',
                src:'http:baidu.com'
                
            }
        })
    </script>
</body>
</html>

运行结果：