<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>
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;
    },
  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.