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

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 控制是否渲染某个页面元素吧!

阅读更多

没有更多推荐了,返回首页