vue中 v-if、v-show(学习笔记)

不是很酷的裤

已于 2023-02-24 16:42:11 修改

阅读量288

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-02-24 16:21:26 首次发布

本文链接：https://blog.csdn.net/m0_72642533/article/details/129197041

版权

文章详细阐述了Vue框架中v-if和v-show指令的相同点和不同点，它们都能根据表达式控制元素显示，但v-show通过改变CSS的display属性，不涉及DOM的增删；而v-if则直接操作DOM。在频繁切换时推荐使用v-show以节省性能，不频繁时v-if更为合适，因为它避免了频繁的DOM操作。

摘要由CSDN通过智能技术生成

相同点：

在 vue 中 v-show 与 v-if 的作用效果是相同的，根据表达式的真假来控制元素是否在页面中显示

当表达式都为 false 时，不显示

当表达式结果为 true 时，显示

不同点：

v-show 与 v-if 的作用效果虽然相同，但是操作原理不同

v-show是操作该元素css样式中的display:none来实现元素是否隐藏，没有操作dom元素

v-if是操作dom元素，添加或删除这个dom元素来实现存在或不存在效果

  data(){
        return{
            //不使用return包裹的数据会在项目的全局可见，会造成变量污染。
            //使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
             isShow:true //表达式的值为true
        }
  },

      // 点击事件方法
      Play(){
          // 如果表达式为true
          if(this.isShow == true){
              // 表达式结果取反
              this.isShow = false;
          }else{
              // 表达式为false时 取反为true
              this.isShow = true;
          }
      },
       //   Play(){
       //        // 表达式取反
       //        this.isShow = !this.isShow
       //       }