Vue JS中如何在v-if指令中串联多个条件？

你的v-if语法错误在于把整个判断表达式都包裹在了单引号里，导致Vue将其当成字符串比较，而非逻辑判断。以下是几种正确的写法：

1. 修正原逻辑判断 #

<div class="person" v-for='user in users' v-if="user.country === 'United States' || user.country === 'Japan'">
  <span>{{ user.first_name }}, {{ user.last_name }}</span>
  <a :href="'mailto:' + user.email.toLowerCase()">{{ user.email }}</a>
  <span>{{ user.country }}</span>
</div>

注：原代码中的lowercase过滤器在Vue 2及之后版本已不推荐使用，换成原生toLowerCase()方法更规范

2. 更简洁的数组包含判断 #

如果需要匹配的国家较多，用数组includes方法更易维护：

<div class="person" v-for='user in users' v-if="['United States', 'Japan'].includes(user.country)">
  <span>{{ user.first_name }}, {{ user.last_name }}</span>
  <a :href="'mailto:' + user.email.toLowerCase()">{{ user.email }}</a>
  <span>{{ user.country }}</span>
</div>

3. Vue最佳实践：提前过滤数据 #

不建议在同一个元素上同时使用v-for和v-if（v-for优先级更高，会先遍历所有元素再判断，影响性能），推荐用计算属性提前过滤数据：

<template>
  <div class="person" v-for='user in filteredUsers' :key="user.id">
    <span>{{ user.first_name }}, {{ user.last_name }}</span>
    <a :href="'mailto:' + user.email.toLowerCase()">{{ user.email }}</a>
    <span>{{ user.country }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [], // 你的用户数据集
      targetCountries: ['United States', 'Japan']
    }
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => this.targetCountries.includes(user.country))
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Justin