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>

按下这个按键可以加一

相关阅读:
【Java SE】运算符详解
Java集合实例
petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive
数据结构与算法之LeetCode-640. 求解方程（数学模拟）
DMA编程
精准DNA甲基化/羟甲基化测序（oxBS-seq）｜易基因技术推介
Guitar Pro 8.0最详细全面的更新内容及全部功能介绍
技术干货｜你需要知道的 10 种常见机器学习算法
实践数据湖iceberg 第三十九课清理快照前后数据文件变化分析
【深入浅出系列】之代码可读性

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