【vue指令---v-show与v-if】

studyer网

已于 2022-02-25 01:02:18 修改

阅读量159

点赞数

文章标签： vue.js javascript elementui

于 2022-02-25 00:52:29 首次发布

本文链接：https://blog.csdn.net/m0_56349322/article/details/123124216

版权

v-show 根据元素的表达值的真假，切换元素的显示和隐藏根源style="display：none"

v-if 也是元素显示与隐藏直接去除dom元素

在实际应运中如果操作频繁用v-show 因为操作dom元素消耗大

<body>
    <div id="app">
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <input type="button" value="累加年龄" @click="addAge">
      <img v-show="isShow" src="./img/monkey.gif" alt="">
      <img v-show="age>=18" src="./img/monkey.gif" alt="">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
          age:17
        },
        methods: {
          changeIsShow:function(){
            this.isShow = !this.isShow;
          },
          addAge:function(){
            this.age++;
          }
        },
      })
    </script>
  </body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

studyer网

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【vue指令---v-show与v-if】

根据元素的表达值的真假，切换元素的显示和隐藏<body> <div id="app"> <input type="button" value="切换显示状态" @click="changeIsShow"> <input type="button" value="累加年龄" @click="addAge"> <img v-show="isShow" src="./img/monkey.gif" alt=""
复制链接

扫一扫