03模版语法

# 模版语法

//{{}}被称为插值运算符
<div id="app">
  <!-- 视图 -->
  <p>{{msg}}</p>
</div>

//不能使用++、--、+=、-=
//不能写语句
//三元运算是可以的{{msg === 1 ? 1 : 2}}

1
2
3
4
5
6
7
8
9

练习🚀

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">{{num+1}}</div> //2
<div id="app">{{num-1}}</div> //0
<div id="app">{{num*1}}</div> //1
<div id="app">{{num/1}}</div> //1
<script>
    new Vue({//类    
        el: "#app", //Element简写 元素
        data: {//数据驱动——data是对象来了
            num: 1, 
        }
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">{{num === 1 ? '是1' : "不是1"}}</div>
<script>
    new Vue({//类
        el: "#app", //元素
        data: {
            num: 1, //是1   //写2就：不是1
        }
    })
</script>

1
2
3
4
5
6
7
8
9
10
11

编辑

上次更新: 2023/08/06, 00:38:41

← 02安装和使用 04生命周期→