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