如何在 v-for 中使用 if 语句？答案

【问题标题】：How can I use if statement with v-for?如何在 v-for 中使用 if 语句？
【发布时间】：2020-01-06 10:16:09
【问题描述】：

我想通过输入值在单元矩阵中渲染内部矩阵。但只渲染到选定的元素。

这是我的代码笔。 https://codepen.io/ofleaf/pen/EJgoVp

我认为应该修改下面的代码。

<div class="inner-layout"
       v-for="val in calInnerLayout"
       :style="{ width: calInnerLayoutWidth + '%', height: calInnerLayoutHeight + '%' }"></div>

如何在 v-for 中使用 if 语句？我想将当前内部元素的父元素与活动元素进行比较，如果匹配则更新该内部元素，否则保留现有值。

【问题讨论】：

标签： javascript html vue.js vue-component

【解决方案1】：

我建议您使用计算属性来满足您的要求。小例子：

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  },
	computed: {
		filteredTodos: function(){
			return this.todos.filter(todo => !todo.done)
		}
	}
})

.as-console-wrapper {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in filteredTodos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

【讨论】：

【解决方案2】：

@dganenco 的答案似乎是一个更好的解决方案，但如果您需要在 template 中使用 v-if 和 v-for，这就是您可以做的。

<div v-for="n in 5" >
  <template v-if="n % 2 === 0"> 
  {{ n }}
  </template>
</div>

【讨论】：