vue3 if 条件与 v-for 循环

Posted 2023-02-23

【中文标题】vue3 if 条件与 v-for 循环

【英文标题】：vue3 if condition with v-for loop

【发布时间】：2021-12-30 14:37:28

【问题描述】：

我正在从我的数据库中获取所有数据以使用 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>

结果：如果progress=0，我不想显示todo，目前它正在显示。

【参考方案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>

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

【讨论】：

这是正确的做法，还是我应该在 laravel 控制器中做，或者还有其他更好的方法吗？

你也可以在你的DIV元素上添加v-if； v-for 循环范围内的任何位置。关于你是否应该在 Laravel 中这样做的问题；这取决于。通常后端应该决定前端必须显示什么，但也许您需要这些待办事项来做其他事情。如果没有更多信息，我无法回答这个问题。

谢谢你，感谢你的帮助，todo.progress 是布尔值，如果我想检查是否等于我必须使用与你相同的方法，todo.progress==0 检查是否等于到？

如果是布尔值，直接使用v-if="todo.progress"，不进行任何布尔运算。或者!todo.progress，如果你想显示假的。

谢谢你，我是 vue 新手，我在哪里可以了解有关 vue dev 的重要信息，有什么参考资料可以学习吗？