v-for循環內的v-if

v-for 循環內的 v-if（顯示個別組件）

盡量不要在v-for中使用v-if，因為當它們存在於同一節點上時，v-if具有比 更高的優先級v-for。
查看文件詳細說明

利用取得物件 ID 去判斷點擊的目標

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
    <a v-on:click="toggle(todo)" href="javascript:;">【待辦事項】</a>
        <span v-if="isActive == todo.id">
          {{ todo.text }}
        </span>
    </li>
  </ol>
</div>

以下為 Vue 的程式碼

new Vue({
  el: "#app",
  data: {
    todos: [
      { id: 1, text: "Learn JavaScript" },
      { id: 2, text: "Learn Vue" },
      { id: 3, text: "Play around in JSFiddle" },
      { id: 4, text: "Build something awesome" },
    ],
    isActive: "false",
  },
  methods: {
    toggle: function (todo) {
      this.isActive = todo.id;
    },
  },
});

codepen 範例