Vue模板语法

一、插值表达式

插值表达式是vue框架提供的一中在HTML模板中绑定数据的方式，使用“{{变量名}}”方式进行绑定Vue实例中data的数据变量，会将绑定的数据实时的在视图（HTML）中显示出来。

插值表达式支持使用变量名称和部分js表达式以及三元表示式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 在这个标签中中编写Vue的视图 -->
    <div id="app">
        <!-- 1直接进行使用 -->
        <p> {{str}} </p>
        <!-- 2字符拼接进行输出 -->
        <p> {{str + '拼接文本'}} </p>
        <!-- 3进行数学运算 -->
        <p> {{num +10}} </p>
        <!-- 4三元表达式 -->
        <p> {{age > 18 ? '成年人' : '未成年' }} </p>
        <!-- 5 使用方法，将字符串进行剪切 -->
        <p> {{str.substr(1,5)}} </p>

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // !创建Vue实例
    new Vue({
        // 通过el绑定元素
        el: '#app',
        // 所有的数据都放在data中
        data: {
            // 定义一个数据
            str:"Vue里面data里面的数据",
            num:10,
            age:13,
            str:'0123456789'
        },
    })
</script>

</html>

二、指令

什么是指令？

在Vue中，指令就是视图中标签的属性，是以“v-”开头的属性，在使用指令之前需啊哟先定义指令。在vue中有内置的指令，也可以进行自定义指令

指定的作用是什么？

指定是用来处理数据的，具体是什么操作，需要看这个指令具有什么作用，例如：v-on是用来绑定事件

posted @ 2021-01-06 09:32 🍊爱吃橙子的丸子阅读(89) 评论(0) 编辑收藏举报

🍊爱吃橙子的丸子

Vue模板语法

公告