vue之v-show与v-if的区别

6人阅读 评论(0) 收藏 举报
分类:
v-if 是动态地向DOM树内添加或者删除DOM元素; 

v-show 是通过设置DOM元素的display样式属性控制显隐; 

所以这里就牵扯到我今天要说的一个问题了:

我们根据用户不同的权限,会对应地显示不同的页面,比如说管理员身份,具有查看、编辑和删除某一条数据的权限,而普通用户只有查看的权限。

此时最好不要使用v-show来控制删除、编辑这两个按钮显隐了,因为页面还是会渲染v-show="false"的部分,只不过在这些元素上加了style="display: none;",这样如果普通用户访问这个页面时,打开开发者模式,把display:none删掉,那么删除和编辑按钮就出来了,点击删除按钮,就把某一行数据删除了,这样岂不是很危险,我区区一个普通用户居然可以行使管理员的职权!!!

<el-button-group class="pull-left">
<el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
<el-button type="primary" icon="el-icon-plus" circle size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" circle size="mini" v-show="isaddbtn" @click="()=> delNode()">
    </el-button>
</el-button-group>
......
data () {
return {
isaddbtn: false,
}
},
methods: {
delNode() {
console.log("你要删除我了吗?");
}
}

chrome页面是这样的:


控制台中是这样的:

   <div data-v-38e52890="" class="el-button-group pull-left">
      <button data-v-38e52890="" type="button" class="el-button el-button--primary el-button--mini is-circle">
        <!---->
        <i class="el-icon-edit"></i>
        <!---->
      </button>
      <button data-v-38e52890="" type="button" class="el-button el-button--primary el-button--mini is-circle">
        <!---->
        <i class="el-icon-plus"></i>
        <!---->
      </button>
      <button data-v-38e52890="" type="button" class="el-button el-button--danger el-button--mini is-circle" 
              style="display: none;">
        <!--可修改为block,然后就可以调用点击事件,亲测-->
        <i class="el-icon-delete"></i>
        <!---->
      </button>
    </div>

如果换成v-if,页面是这样的:


控制台中是这样的:

  <div data-v-38e52890="" class="el-button-group pull-left">
      <button data-v-38e52890="" type="button" class="el-button el-button--primary el-button--mini is-circle">
        <!---->
        <i class="el-icon-edit"></i>
        <!---->
      </button>
      <button data-v-38e52890="" type="button" class="el-button el-button--primary el-button--mini is-circle">
        <!---->
        <i class="el-icon-plus"></i>
        <!---->
      </button>
      <!---->
    </div>
所以为了安全起见,使用 v-if 控制是否渲染某个页面元素吧!

查看评论

VC6中两个对话框的同时显示 作者:黄基前

 对于VC++初学者,可能会遇到这样一个问题:一个基于Dialog的MFC AppWizard应用程序,再Insert一个对话框,如何同时显示这两个对话框呢? ---- 其实这个问题很简单,想要在屏幕...
  • ghj1976
  • ghj1976
  • 2001-01-09 10:47:00
  • 1398

vue 中 v-if 和 v-show 的区别

vue 中 v-if 和 v-show 的区别
  • webxiaoma
  • webxiaoma
  • 2017-05-18 21:32:43
  • 3050

vue中v-if和v-show的区别

欢迎访问我的个人博客 http://xiaolongwu.cn/ 相同点 两者都是在判断DOM节点是否要显示。 不同点 1、实现方式 v-if是根据后面数据的真假值判断直接从...
  • wxl1555
  • wxl1555
  • 2018-02-08 00:52:51
  • 1181

Vue.js 中 v-if 和 v-show 的区别

开始第一个MVVM框架啦,激动啊,哈哈 因为Vue.js还比较新,感觉网上的资源不是特别特别多,加了两个QQ群,有问题的时候问问群友,居然还要付费加群,整的我也想去搞一个诶,嘻嘻嘻…… 今天聊一下...
  • yCharlee
  • yCharlee
  • 2016-09-22 11:24:18
  • 2647

vuejs中v-if和v-show的区别以及v-show不起作用

1.官网概念描述 v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- -...
  • jian_xi
  • jian_xi
  • 2017-03-30 15:34:18
  • 13836

v-if与v-show的区别?

在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的...
  • qq_30632003
  • qq_30632003
  • 2016-09-29 14:15:46
  • 5536

对于v-if 和 v-show的选择 --Vue.js

引言: 对于v-if和v-show都可以控制元素的显隐,但是因为两者控制显隐方式的不同,所以试用的场合还是不同的。 一、v-if 控制显隐方式 v-if 是惰性的,如果初始渲染的...
  • qq_27552077
  • qq_27552077
  • 2017-06-04 12:12:35
  • 409

v-if 和 v-show的区别

v-if和v-show的区别 简单来说,v-if 的初始化较快,但切换代价高;v-show 初始化慢,但切换成本...
  • ning0_o
  • ning0_o
  • 2017-02-20 09:44:15
  • 10028

vue中 v-if和v-show的区别

Vue系统指令中:相同点:v-if和v-show都能控制元素的显示与隐藏.不同点:v-if是将这个元素添加或移除dom中,而v-show是动态在这个元素上添加style=&quot;display:n...
  • baidu_39001881
  • baidu_39001881
  • 2018-02-27 09:29:06
  • 17

vue中的tab切换(v-show,v-if)

今天在用vue写tab切换的时候遇到了一个小坑,就是:不同的选项对应的列表的渲染我用的是v-show进行判断,结果发现虽然选项见得列表切换成功了但是列表的渲染样式却出现了一场异常,...
  • fenghui187
  • fenghui187
  • 2017-04-18 18:22:51
  • 1288
    个人资料
    等级:
    访问量: 597
    积分: 108
    排名: 125万+
    文章存档