Template syntax - Insert text template syntax // - // insert label template syntax - double braces // template syntax - insert data into the tag attributes

Template grammar - inserting text

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
    
        <!-- 使用 v-text 指令向标签中插入纯文本时，标签中原有的内容会被覆盖 -->
        <h1 v-text="texts">你好，世界</h1>
        <!-- 如果被插入的内容时 HTML 标签，则会被当成纯文本显示 -->
        <h1 v-text="htmls"></h1>
    </div>

    <script src="./vue.js"></script>
  
    <script>

        const app = new Vue({
            el: '#app',
            data: {
                texts: 'Hello World',
                htmls: '<a href="">Hello World</a>'
            }
        });

    </script>
</body>

</html>

Template syntax - insert labels

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
    
        <!-- 使用 v-html 指令向标签中插入 HTML 时，标签中原有的内容会被覆盖 -->
        <h1 v-html="htmls"><a href="">{{texts}}</a></h1>
    </div>

    <script src="./vue.js"></script>
  
    <script>

        const app = new Vue({
            el: '#app',
            data: {
                texts: '你好，世界',
                htmls: '<a href="">Hello World</a>'
            }
        });

    </script>
</body>

</html>

Template syntax - double braces

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <!-- 数据属性 -->
        <h1>{{name}}</h1>

        <!-- 运算表达式 -->
        <h1>{{age + 1}}</h1>

        <!-- 三元表达式 -->
        <h1>{{gender === 'male' ? '男' : '女'}}</h1>

        <!-- 方法调用 -->
        <h1>{{hobby.join('-->')}}</h1>
    </div>

    <script src="./vue.js"></script>
  
    <script>

        /* 
            双花括号语法中插入基本数据，还可以插入表达式，

        */

        const app = new Vue({
            el: '#app',
            data: {
                name: '刘旭凯',
                age: 19,
                gender: 'female',
                hobby: ['睡觉', '吃饭', '打游戏']
            }
        });

    </script>
</body>

</html>

Template syntax - insert data into the tag attributes

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <h1 v-bind:title="name">{{name}}</h1>
        <!-- 将 v-bind 应用到标签属性名之前，即可在属性值中插入表达式 -->
        <h1 v-bind:tie="'我叫' + name + '今年' + age + '岁，爱好' + hobby.join('-->')">{{name}}</h1>
        <!-- v-bind: 指令有一个简写形式，即冒号（:） -->
        <h1 :title="'我叫' + name + '今年' + age + '岁，爱好' + hobby.join('-->')">{{name}}</h1>
    </div>

    <script src="./vue.js"></script>

    <script>
        /* 
            双花括号语法中插入基本数据，还可以插入表达式，

        */

        const app = new Vue({
            el: '#app',
            data: {
                name: '刘旭凯',
                age: 19,
                gender: 'female',
                hobby: ['睡觉', '吃饭', '打游戏']
            }
        });
    </script>
</body>

</html>

Top upup

Published 151 original articles · won praise 1 · views 1876

Private letter concerns

Template syntax - Insert text template syntax // - // insert label template syntax - double braces // template syntax - insert data into the tag attributes

Template grammar - inserting text

Template syntax - insert labels

Template syntax - double braces

Template syntax - insert data into the tag attributes

Guess you like