关键词：
【中文标题】v-for 和 v-if 在 vue.js 中不能一起工作【英文标题】：v-for and v-if not working together in vue.js 【发布时间】：2018-08-02 16:03:18 【问题描述】：一个表单用于提交文本和两个选项告诉 vue 在哪一列显示文本。当 col2 单选按钮被选中时，提交的文本应该显示在第 2 列。这不会发生，第 1 列的文本是显示。
我有两个单选按钮，它们应该将值“一”或“二”传递给 newInfo.option 在 submnit 上，一个方法将表单数据推送到数组“信息”。
<input type="radio" id="col1" value="one" v-model="newInfo.col">
<input type="radio" id="col2" value="two" v-model="newInfo.col">
这些数据被正确地推送到数组“信息”中，我可以遍历它。我知道这是有效的，因为我可以遍历数组，console.log 中的所有数据。所有提交的表单数据都在那里。
接下来我在模板中遍历这个数组两次。一次用于 info.col==="one"，其他迭代仅应在 info.col==="two" 时显示。我正在同时使用 v-for 和 v-if，vue.js 文档说可以这样做，
https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for
<div class="row">
<div class="col-md-6">
<ol>
<li v-for="item in info" v-if="item.col==='one'">
text: item.text , col: item.col
</li>
</ol>
</div>
<div class="col-md-6">
<ol>
<li v-for="item in info" v-if="!item.col==='two'">
text: item.text , col: item.col
</li>
</ol>
</div>
</div>
完整的 vue.js 代码在 github here
它在 gh-pages here 上运行
【问题讨论】：
我遇到了同样的问题。这个link 解释了为什么它不起作用，你应该对数组和对象做什么 用 v-show 代替 v-if 怎么样？我知道该元素仍然存在，但它会被隐藏。 您可以在v-for 指令中使用 Javascript。例如，item in myFilter(info)。
您提供的 Guid 链接还指出 v-if 的优先级高于 v-for。这意味着它会在 item 甚至有值之前尝试评估 item.col。
【参考方案1】：
如果由于某种原因无法过滤列表，您可以将具有v-for 和v-if 的元素转换为组件，并将v-if 移动到组件中。
原始示例
原始循环
<li v-for="item in info" v-if="item.col==='one'">
text: item.text , col: item.col
</li>
建议重构
重构循环
<custom-li v-for="item in info" :visible="item.col==='one'">
text: item.text , col: item.col
</custom-li>
新组件
Vue.component('custom-li',
props: ['visible'],
template: '<li v-if="visible"><slot/></li>'
)
【讨论】：
【参考方案2】：<div class="row">
<div class="col-md-6">
<ol>
<li v-for="item in info">
<template v-if="item.col==='one'">
text: item.text , col: item.col
<template>
</li>
</ol>
</div>
<div class="col-md-6">
<ol>
<li v-for="item in info">
<template v-if="!item.col==='two'">
text: item.text , col: item.col
<template>
</li>
</ol>
</div>
</div>
【讨论】：
您应该对您的解决方案发表评论，以提供更多见解伴侣 :) “纯代码”答案不是很有趣 :) 更好的解决方案是用 li 交换模板。这样可以避免空的 li 元素。【参考方案3】：<div v-for="item in items">
<div v-if="checkThis(item.computeThisProperty)" />
<div v-else />
</div>
methods:
checkThis(i)
return this[i];
,
computed:
myComputedProperty()
return this.$store.state.something ? true : false;
【讨论】：
【参考方案4】：为什么不用Computed Properties 的力量呢？
computed:
infoOne: function ()
return this.info.filter(i => i.col === 'one')
,
infoTwo: function ()
return this.info.filter(i => i.col === 'two')
然后在每个列表上迭代其各自的属性而无需检查。示例
<ol>
<li v-for="item in infoOne">item</li>
</ol>
这里是工作fiddle
【讨论】：
很好的答案，并回答你的问题，因为我对 vue 很陌生，仍然有很多工作要做。但是谢谢，你的回答很有趣 很高兴我能帮上忙 这是官方 Vue 风格指南的 advice，被归类为“必需”（与“强烈推荐”、“推荐”或“谨慎使用”相对）。跨度> @DobleL 嘿，我绝对喜欢你的回答，我已经修改了它。我在每个列表项旁边添加了“删除”按钮，因此单击按钮时我从列表中删除了该索引。问题是我们从计算属性中迭代两个列表，基本上我们有重复的索引（查看列表项的打印，你会明白），所以它从错误的类别中删除了项目。我正在考虑解决这个问题的方法，但我必须同时使用 v-for 和 v-if ，这是不推荐的。您有什么建议或解决方案吗？提前致谢！这是我的fiddle【参考方案5】：如果v-if="item.col==='two'"，则从第二个删除!
最好你可以这样做（只迭代一次）：
<div class="row" v-for="item in info">
<div class="col-md-6">
<ol>
<li v-if="item.col==='one'">
text: item.text , col: item.col
</li>
</ol>
</div>
<div class="col-md-6">
<ol>
<li v-if="item.col==='two'">
text: item.text , col: item.col
</li>
</ol>
</div>
</div>
【讨论】：
啊！我现在看到了，谢谢，是的，你的方式意味着只迭代一次。非常感谢 实际上你的代码会错开行。不完全是我想要的。不过谢谢【参考方案6】：您的第二次检查是!item.col==='two'，并且只有当它不等于“二”时才会显示。
编辑：！ not 运算符可能比 === 绑定得更紧密，所以它总是返回 false。添加括号以控制应用程序的顺序。我说可能是因为它可能是我不熟悉的 Vue 魔法，而不是纯粹的 JavaScript 表达式。
我想你想删除那个感叹号。或者让它 !(item.col==='one') 显示除“一”以外的任何值。
【讨论】：
在没有 v-if 和 v-for 的 Vue.js 中显示（添加、编辑）和删除多个列中的列表项
】在没有v-if和v-for的Vue.js中显示（添加、编辑）和删除多个列中的列表项【英文标题】：Displaying(adding,editing)andDeletinglistitemsinmultiplecolumnsinVue.jswithoutv-ifandv-for【发布时间】：2020-12-1617:45:24【问题描述】：我是Vue.js的初学者。我想... 查看详情
包含 Vue.js v-if 和 v-for 指令的 HTML 标签在加载时闪烁
】包含Vue.jsv-if和v-for指令的HTML标签在加载时闪烁【英文标题】：HTMLTagscontainingVue.jsv-ifandv-fordirectivesflashatloading【发布时间】：2017-06-1008:49:57【问题描述】：我使用Vue.js将数据发送到一个基本且非常简单的API，该API通过下面的表... 查看详情
v-for和v-if不能同时使用
如果使用v-for遍历数据时，想筛选出URL不为空的项并进行渲染<ul><liv-for="(item,index)inlist"v-if="item.url":key="index">item.name</li></ul> 但是v-for和v-if无法同时使用，这时就可以在computed中进行筛选操作<ul><liv- 查看详情
v-for和v-if不能直接一起使用
参考技术A不能直接这样写，会出现警告。正确写法注意：永远不要把v-if和v-for同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）如果避免出现这种情况，则在外层嵌套template（页面渲染不生成... 查看详情
v-for与v-if使用注意事项
...一种解决方案：使用v-for和v-if的组合应用，由于v-for是v-if不能写在同一个元素中，则v-if可以放在v-for内层，注意一点：key不能放在template中，可以将key放在内层元素中。但是，v-for 具有比 v-if 更高的优先级，这意味着&... 查看详情
Vue.js v-if inside v-for 不主动监听数组变化
】Vue.jsv-ifinsidev-for不主动监听数组变化【英文标题】：Vue.jsv-ifinsidev-fornotactivelylisteningtoarraychange【发布时间】：2018-03-0600:31:29【问题描述】：我正在尝试为数组中的每个数组显示一个元素，并在其数组包含真正的布尔值时显示该... 查看详情
表格中的 vue.js 条件渲染
...续显示？【问题讨论】：【参考方案1】：很遗憾，v-if和v-for没有一起工作。您可以将 查看详情
vue中v-if和v-for指令最好不要同时使用
参考技术A建议不要在与v-for相同的元素上使用v-if。因为v-for指令的优先级高于v-if当它们处于同一节点。v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。将if指令添加到父级元素上，这可以避免对每个列表... 查看详情
如何在 Vue.js 中过滤数组和循环 V-for
】如何在Vue.js中过滤数组和循环V-for【英文标题】：HowtofiltersarrayandloopV-forinVue.js【发布时间】：2020-11-0720:30:22【问题描述】：我正在尝试使用Vue.js循环数组级别，我可以使用函数forEach获取响应json，例如：letfilters=[]constarray=respons... 查看详情
vue中v-if和v-for的区别是什么(代码片段)
v-if和v-for的区别：1、作用不同，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染；而v-for指令基于一个数组来渲染一个列表。2、优先级不同，v-for优先级比v-if高，... 查看详情
避免v-if和v-for用在一起
参考技术Av-if和v-for一起使用，v-for的优先级要高于v-if详解当vue处理指令时，v-for比v-if具有更高的优先级，所以这个模板：将会经过如下运算因此，哪怕我们只渲染出一小部分的用户元素，也得在每次重新渲染的时候遍历整个列... 查看详情
前端常见vue面试题，被问到不会就糟了(代码片段)
...好相反，因此产生了一些症状的不同，但是不管怎样都是不能把它们写在一起的vue2.x源码分 查看详情
vue.js为啥在component的template的root标签中不能使用v-for
参考技术A1、用USB数据线将手机与电脑连接,打开腾讯手机管家点工具箱找到“一键Root”；2、点击“一键Root”。3、再点击“开始ROOT”。4、等待几分钟分钟，这个过程千万不要断开手机连接5、然后就会root成功了本回答被提问者... 查看详情
vue.js学习笔记：在元素和template中使用v-if指令
f指令语法比较简单，直接上代码：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title></title><scriptsrc="https://cdn.bootc 查看详情
在 v-for 中使用数组对象的属性和 vue.js 中的 v-bind？
】在v-for中使用数组对象的属性和vue.js中的v-bind？【英文标题】：Usinganarray\'sobject\'sattributeinav-forwithv-bindinvue.js?【发布时间】：2019-02-0802:28:32【问题描述】：所以我正在尝试遵循我在API和vue.js页面中的示例中找到的内容，但它似... 查看详情
vue面试题（1）
...什么？答：数据驱动、组件系统5.vue几种常用的指令答：v-for、v-if、v-bind、v-on、v-show、v-else6.vue常用的修饰符？答：.prevent:提交事件不再重载页面； .stop:阻止单击事件冒泡； .self:当事件发生在... 查看详情
为啥v-if和v-for不建议同时使用
参考技术A在官方文档中明确指出v-for和v-if不建议一起使用。原因：v-for比v-if优先级高，每一次都需要遍历整个数组，造成不必要的计算，影响性能，即使100个list中只需要使用一个数据，也会循环整个数组。解决：使用computed 查看详情
v-if和v-for
...容。这块内容只会在指令表达式返回true值的时候被渲染v-for指令基于一个数组来渲染一个列表。v-for指令需要使用iteminitems形式的特殊语法，其中items是源数据数组或者对象，而item则是被迭代的数组元素的别名。在v-for时，建议设 查看详情