Vue-条件渲染指令

条件渲染指令

条件渲染指令有两种：

两种指令大致相似

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">Ap>
      <p v-else-if="score>=60">Bp>
      <p v-else>Cp>
    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">+1button>
    div>
<script>
  const vm={
    data(){
      return{
        count:0
      }
    }
  }
  const app=Vue.createApp(vm)
  app.mount('#app')
script>
  
body>

按下这个按键可以加一

相关阅读:
【PYG】简单分析Planetoid()中存储Cora数据集边的数量
如何在熊市中寻找机会？
一种SIP和WebRTC互相通信的方案
[附源码]Python计算机毕业设计Django微录播室预约管理系统
spring5.0源码解析 Aop 01
Mysql 5.7 新特性之 json 类型的增删改查
供应链和物流的自动化新时代
Spring AOP基础&动态代理&基于JDK动态代理实现
Promise，async，await 面试题
《rust学习一》 fleet 配置rust环境

原文地址：https://blog.csdn.net/Kevin7_35Durant/article/details/139884974