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>

按下这个按键可以加一

相关阅读:
漏洞深度分析|Apache MINA SSHD反序列化漏洞
Kubernetes安装nginx-controller作为统一网关
基于scRNA-seq的GRN分析三阴性乳腺癌的肿瘤异质性
【业务功能篇 131】23种设计模式介绍
部署elasticsearch集群
关于 PropertyOverrideConfigurer PropertySourcesPlaceholderConfigurer
爆改YOLOV7的detect.py制作成API接口供其他python程序调用（超低延时）
阅读JavaScript文档-一些常用方法
接口自动化测试的概述及流程梳理~
APP外包开发需要注意的问题

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