vue循环多个值的操作方式

Question

var data = [{value: false}, {value: false}, {value: true}]
<template v-for="item in data">
//执行代码
//必须是3个value为true的时候才执行代码
//如何写这个if的？
</template>

Answer 1

其实数组提供了类似的API满足你的要求。Array.prototype.every() 方法使用传入的函数测试所有元素，只要其中有一个函数返回值为 false，那么该方法的结果为 false；如果全部返回 true，那么该方法的结果才为 true。
MDN every文档

<div id="app">
    <template v-if="isAllTrue">
        <p>所有的value值都为true，我才显示~</p>
    </template>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    data: [{
      value: false
    }, {
      value: false
    }, {
      value: true
    }]
  },
  computed: {
    isAllTrue(){
        let result = this.data.every((item) => {
            return item.value;
        })
        return result;
    }
  }
});
</script>

最后再推荐一下这篇好文：【深度长文】JavaScript数组所有API全解密
（感觉我每次回答跟数组相关的问题，都忍不住要推荐这篇文章~~~虽然不是我写的）

Answer 2

https://jsfiddle.net/v1un4r4s/8/

---

换个思路