模板语法-插入文本//模板语法-插入标签//模板语法-双花括号//模板语法-向标签属性中插入数据

最新推荐文章于 2022-09-29 10:58:46 发布

上头upup

最新推荐文章于 2022-09-29 10:58:46 发布

阅读量428

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45802159/article/details/103816476

版权

Vue 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

模板语法-插入文本

<!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>

模板语法-插入标签

<!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>

模板语法-双花括号

<!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>

模板语法-向标签属性中插入数据

<!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>

上头upup

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模板语法-插入文本//模板语法-插入标签//模板语法-双花括号//模板语法-向标签属性中插入数据

模板语法-插入文本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫