v-if v-show（自用）

最新推荐文章于 2024-09-27 15:27:45 发布

火柴不卖小女孩

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量79

点赞数

文章标签： javascript

。。。

本文链接：https://blog.csdn.net/M2742682223/article/details/126929210

版权

初识v-if v-show

都可以控制元素的显示和隐藏

一、v-if

v-if是通过动态的添加或删除元素，来控制元素的显示与隐藏

<div>
      <span>v-if v-show{{num}}</span>
      <button @click="num++">加</button>
      <button @click="num--">减</button>
      <p v-if="num<=3">123</p>
      <p v-if="num>3&&num<=6">456</p>
      <p v-if="num>6">789</p>
</div>

在这里插入图片描述

二、v-show

v-show是通过css中添加display：none；实现元素的隐藏。

<div>
      <span>v-show---{{num}}</span>
      <button @click="num++">加</button>
      <button @click="num--">减</button>
      <p v-show="num<=3">123</p>
      <p v-show="num>3&&num<=6">456</p>
      <p v-show="num>6">789</p>
</div>