javascript - 如何将 if 语句与 v-for 一起使用？

Question

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

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

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

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

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

Answer 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>