vue中v-if和v-for联合使用

在 Vue 中，v-if 和 v-for 可以联合使用。v-if 控制元素是否显示，而 v-for 循环渲染元素。例如，如果你有一个数组并且想要在有值的情况下渲染一个列表，你可以使用 v-if 来检查数组是否为空，并使用 v-for 来渲染列表项。

<template>
  <div>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    <p v-else>No items found</p>
  </div>
</template>

这样只会在items有数据时才会渲染列表，如果items为空，则会显示"No items found"这个提示。

相关问题

vue3中v-if和v-for联合使用

在 Vue 中，v-if 和 v-for 可以联合使用。v-if 控制元素是否显示，而 v-for 循环渲染元素。例如，如果你有一个数组并且想要在有值的情况下渲染一个列表，你可以使用 v-if 来检查数组是否为空，并使用 v-for 来渲染列表项。

<template>
  <div>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    <p v-else>No items found</p>
  </div>
</template>

这样只会在items有数据时才会渲染列表，如果items为空，则会显示"No items found"这个提示。

添加一个根据上班打卡时间区间进行查询 点击查询按钮可进行姓名和时间区间的联合查询 <el-select v-model="filterUser" ><el-option v-for="(item, index) in uniqueUser" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" ></el-date-picker> <el-button type="primary" @click="selectUser">查询</el-button>methods: { //获取人员打卡信息 async getAttendanceData() { const { data: res } = await request.get("/User/UserClockIn", { params: { user_name: this.filterUser }, }); if (res.status !== 200) return this.$msg.error(res.msg); this.attendanceData = res.data; this.user_option = this.attendanceData.map((item) => { return { value: item.user_name, label: item.user_name, }; }); }, //根据姓名筛选 selectUser() { if (this.filterUser.length > 0) { this.filteredList = this.attendanceData.filter( (item) => this.filterUser.indexOf(item.user_name) !== -1 ); } else { this.filteredList = this.attendanceData; } }, }, computed: { //监视：当没有从下拉框选择成员信息时 显示全部信息 filteredList: { get() { if (this.filterUser.length > 0) { return this.attendanceData.filter( (item) => this.filterUser.indexOf(item.user_name) !== -1 ); } else { return this.attendanceData; } }, set(value) {}, },

这段代码是一个 Vue.js 的组件，其中包含了一个下拉框、一个日期选择器和一个按钮。当用户选择一个人员和时间区间后，点击查询按钮，会触发 selectUser 方法，该方法会根据选择的人员和时间区间来筛选出符合条件的数据，并将其存在 filteredList 中。如果没有从下拉框选择成员信息，则会显示全部信息。另外，该组件还有一个 getAttendanceData 方法，用于获取人员打卡信息，并将其中的人员名字存储在 user_option 中，供下拉框使用。