条件渲染指令
条件渲染指令有两种：
两种指令大致相似
- v-if
- v-show
如果v-if的值为true，那么显示出内容，v-show也是一样
如果v-if的值为false，那么将不创建这个指令的标签，v-show将隐藏此标签
<body><div id="app"><p v-if="flag">v-if使用</p><p v-show="show">v-show使用</p></div>
<script>const vm={data(){return{flag:false,show:false}}}const app=Vue.createApp(vm)app.mount('#app')
</script></body>只有v-show这个指令在里面
v-else和v-else-if指令
与条件渲染指令v-if相对应的就是v-else和v-else-if
<body><div id="app"><p v-if="score>=80">A</p><p v-else-if="score>=60">B</p><p v-else>C</p></div>
<script>const vm={data(){return{score:80}}}const app=Vue.createApp(vm)app.mount('#app')
</script></body> 
事件绑定指令
事件绑定指令可以写成v-on，简写为@
语法：v-on:事件名="触发事件" 或者 @事件名="触发对象"
常见的事件有
| 事件名 | 效果 |
| click | 鼠标点击 |
| mouseenter | 鼠标经过 |
| mouseleave | 鼠标离开 |
| focus | 获得焦点 |
| blur | 失去焦点 |
| keyup | 键盘抬起 |
<body><div id="app"><p>count:{{count}}</p><button @click="count+=1">+1</button></div>
<script>const vm={data(){return{count:0}}}const app=Vue.createApp(vm)app.mount('#app')
</script></body>按下这个按键可以加一
