条件渲染指令
条件渲染指令有两种：
两种指令大致相似
- v-if
- v-show
如果v-if的值为true，那么显示出内容，v-show也是一样
如果v-if的值为false，那么将不创建这个指令的标签，v-show将控制css的display来隐藏此标签
<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-if不会创建这个盒子
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>按下这个按键可以加一
扫一扫
1130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
