VueJS复合v-if

Posted 2021-03-30

如果满足两个条件，我只想显示一个按钮。首先，我尝试v-if，一次只有一个条件：

v-if="editMode"
v-if="$can('customersdelete')"

一次只使用一个条件，按钮显示，所以我认为这两个条件都是正确的。如果我使用：

v-if="editMode && $can('customersdelete')"

该按钮不显示。 $ can是一个mixin，用于验证用户是否有权做某事。

<script>
  export default {
    methods: {
      $can(permissionName) {
        return Permissions.indexOf(permissionName) !== -1;
      },
    },
  };
</script>

我不知道为什么这不起作用......

答案

显然，任何后续的v-if都会被忽略，只有第​​一个被考虑在内，如下例所示：

Vue.config.devtools = false;
Vue.config.productionTip = false;

const Permissions = ['customersdelete'];
new Vue({
  el: '#app',
  data() {
    return { editMode: true };
  },
   methods: {
    $can(permissionName) {
      return Permissions.indexOf(permissionName) !== -1;
    },
  },
})

code {
  background-color: #f5f5f5;
  border: 1px solid #eee;
  padding: 2px 5px;
  color: red;
  border-radius: 3px;
  display: inline-block;
}
div {
  margin-top: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label><input type="checkbox" v-model="editMode">editMode</label><br><br>
  
  <div>$can('customersdelete') => <code v-text="$can('customersdelete')"></code></div>
  <div>editMode => <code v-text="editMode"></code></div>
  <hr />
  <div v-if="$can('customersdelete')">
    <code>v-if="$can('customersdelete')"</code>
  </div>
  <div v-if="editMode">
    <code v-if="editMode">v-if="editMode"</code>
  </div>
  <div v-if="editMode && $can('customersdelete')">
    <code>v-if="editMode && $can('customersdelete')"</code>
  </div>
  <div v-if="editMode"
       v-if="$can('customersdelete')">
    <code>v-if="editMode" v-if="$can('customersdelete')"</code>
  </div>
  <div v-if="$can('customersdelete')"
       v-if="editMode">
    <code>v-if="$can('customersdelete')" v-if="editMode"</code>
  </div>
</div>

另一答案

我建议使用函数然后在v-if中使用。

例

v-if="isButtonShow()"

以下是方法部分：

methods:{
isButtonShow(){
  if(this.editMode){
    if(this.$can('customersdelete'){
      return true;
    }
  }
 return false;
 }
}

以上是关于VueJS复合v-if的主要内容，如果未能解决你的问题，请参考以下文章

条件渲染在 vuejs v-if 中不起作用

输入模型的vuejs v-if条件

vuejs中类似于v-if的自定义指令

VueJS v-if

VueJS：在 v-if 中直接改变 prop 与 this.[prop]

vuejs18-v-if指令