Vue.js中高效处理v-if多条件判断及数据过滤的最佳实践

<div v-if="user.country === 'United States' || user.country === 'Japan'">
  <!-- 内容 -->
</div>

<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 | lowercase">{{ user.email }}</a>
  <span>{{ user.country }}</span>
</div>

<template v-for="user in users" :key="user.id"> <!-- 建议为v-for添加key以提高性能和稳定性 -->
  <div class="person" v-if="user.country === 'United States' || user.country === 'Japan'">
    <span>{{ user.first_name }}, {{ user.last_name }}</span>
    <a :href="'mailto:' + user.email">{{ user.email }}</a>
    <span>{{ user.country }}</span>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 模拟用户数据
const users = ref([
  { id: 1, first_name: 'John', last_name: 'Doe', email: 'john.doe@example.com', country: 'United States' },
  { id: 2, first_name: 'Jane', last_name: 'Smith', email: 'jane.smith@example.com', country: 'Canada' },
  { id: 3, first_name: 'Kaito', last_name: 'Tanaka', email: 'kaito.tanaka@example.com', country: 'Japan' },
  { id: 4, first_name: 'Alice', last_name: 'Brown', email: 'alice.brown@example.com', country: 'United States' },
  { id: 5, first_name: 'Maria', last_name: 'Garcia', email: 'maria.garcia@example.com', country: 'Mexico' },
]);

// 使用计算属性过滤用户列表
const filteredUsers = computed(() => {
  const allowedCountries = ['United States', 'Japan'];
  // 使用Array.prototype.filter()和Array.prototype.includes()进行高效过滤
  return users.value.filter(user => allowedCountries.includes(user.country));
});
</script>

<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">{{ user.email }}</a>
    <span>{{ user.country }}</span>
  </div>
</template>

<style scoped>
/* 示例样式，可根据需要调整 */
.person {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
a {
  text-decoration: none;
  color: #007bff;
}
</style>