Vue3-初识-引入-基本操作(第一篇)

{ {msg}}

<button @click=“changeMsg” >显示内容

{ {msg}}

<button @click=“changeMsg” >显示内容

2.JavaScript表达式在模板中使用

{ {msg.split('')}}

{ {msg.split('').reverse()}}

{ {msg.split('').reverse().join('')}}

{ {color=="red"?"开心":"难过"}}

<button @click=“changeMsg”>颜色切换

3.动态指令(比较少用)

<button @click=“changeMsg”>切换颜色

<button @[eventName]=“changeMsg”>切换颜色

4.计算属性

因为在插值表达式中方太多的逻辑对（逻辑：split，join,reverse等方法）,不方便

{ {reverseMsg}}

结果：kcilc

5.watch监听数据的变化

{ {msg}}