Vue3模板语法，ref响应式，各种指令以及条件与列表渲染

1.模板语法的表达式

内容写在两对大括号里

2.ref响应式

3.v-bind指令（可以简写成“:”）

使用v-bind指令，才可以响应式地绑定一个Attribute

1.使用v-bind进行图片轮播

2.class与style的绑定

4.v-on指令（简写“@”）

可以使用v-on指令监听DOM事件

1.内联事件处理器

使用click点击事件在点击的时候，数字会变大，背景色随机变化

2.方法事件处理器

使用表单组件switch中的@change属性改变loading的状态

5.条件渲染

1.v-if与v-else

如果v-if中的条件满足则显示v-if中的内容，否则显示v-else中的内容

2.多个条件则用v-else-if

3.v-show

与v-if的区别在于：

v-if在条件初次渲染时条件为true时才被渲染，如果初次渲染时条件为 false，则不会做任何事

v-show则是元素无论初始条件是什么，都会被渲染

总结：如果需要频繁切换，使用v-show会更好，如果在运行时绑定条件很少改变，则v-if会更好

6.列表渲染

使用v-for指令渲染一个列表

7.案例