vue3 if 条件与 v-for 循环

Question

我正在从我的数据库中获取所有数据以使用 vue3 和 laravel 查看。

现在它工作正常，但我想用 v-for 申请 if 条件。

例如：仅在 (progress=1) 时显示待办事项。

vue: 这部分工作正常，可以从数据库中获取所有内容

import axios from "axios";
import { defineComponent, reactive } from 'vue'



    export default defineComponent({
      setup() {
    
        const state=reactive({
          todos:[],
          todoText:"",
        });
    function getTodos(){  
       axios.get('http://127.0.0.1:8000/api/todos')
       .then(response=>{
         state.todos=response.data;
       });
     } 
     getTodos();
    }

HTML:

<div v-for="(todo,index) in state.todos" :key="index" class="   border-dashed bg-white  rounded-md shadow-md  ">
    <div class="justify-between flex ">
    <div  class="text-gray-600 p-4 font-medium "> {{todo.text}}
    <span class="text-gray-500 text-sm"> Small Details </span> 
    <span class="text-gray-500 text-sm"> Progress: {{todo.progress}} </span> 
    </div>
</div>

结果：如果进度=0，我不想显示待办事项，目前正在显示。

Answer 1

如果您不想在代码中添加 DOM 元素，您可以使用模板标签：

<div v-for="(todo,index) in state.todos" :key="index" class="border-dashed bg-white rounded-md shadow-md">
  <template v-if="todo.progress !== 0">
    <div class="justify-between flex" />
    <div class="text-gray-600 p-4 font-medium">{{todo.text}}
      <span class="text-gray-500 text-sm"> Small Details </span> 
      <span class="text-gray-500 text-sm"> Progress: {{todo.progress}} </span> 
    </div>
  </template>
</div>

旁注：您应该检查结束标签，它们与您当前的问题不一致。

vue3 if 条件与 v-for 循环

vue3 if condition with v-for loop

laravel

vue.js

vue-component