这是因为你的click事件传播到了span的父元素，也就是li，因此active被触发了。所以为了防止这种情况，你需要使用stop来阻止你的事件进一步传播。详情请阅读

<span v-on:click.stop="deleteTodo(index)">{{ todo.delete }}</span>

字符串
https://jsfiddle.net/RiddhiParekh/k3b0umL1/

你也可以尝试这个，我认为这会看起来更好，即分开的交叉符号和任务文本的跨度。

<div id="app">
    <h1>{{ message }}</h1>
    <form v-on:submit.prevent="addNewTodo">
      <input id="input-value" type="text" v-model="task">
      <button type="submit">Add todo</button>
    </form>

    <ul>
      <li v-for="(todo, index) in todos">
      <span :class="{ completed: todo.isActive }" @click="$set(todo, 'isActive', !todo.isActive)">
      {{ todo.task }}</span> <span v-on:click="deleteTodo(index)">{{ todo.delete }}</span>
      </li>
    </ul>
  </div>

字符串