鍍金池/ 問答/HTML/ Vue中如何修改v-bind指向？

Vue中如何修改v-bind指向？

如代碼所示，我想指定所有l(wèi)i默認(rèn)樣式為defaultStyle，點擊后修改為liStyle，請問Vue可以做到么？
如果不行有沒有其他解決手段？

<template>
  <div>
    <ol>
      <li
        @click="log();"
        v-for="(todo, index) in todos"
        :key="'list' + index"
        :style="defaultStyle">
        {{ todo.text}}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  name: 'plan-list',
  data () {
    return {
      todos: [
        { text: '學(xué)習(xí) JavaScript', lityle: { color: 'yellow' } },
        { text: '學(xué)習(xí) Vue', liStyle: { color: 'red' } },
        { text: '整個牛項目', liStyle: { color: 'green' } }
      ],
      defaultStyle: {
        color: 'blue'
      }
    };
  },
  methods: {
    log: function () {
      console.log(this);
    }
  }
};
</script>
回答
編輯回答
毀與悔

可以加個狀態(tài)。

:style="todo.clicked && todo.liStyle || defaultStyle"
//
{ text: '學(xué)習(xí) JavaScript', liStyle: { color: 'yellow' }, clicked: false  },
{ text: '學(xué)習(xí) Vue', liStyle: { color: 'red' }, clicked: false  },
{ text: '整個牛項目', liStyle: { color: 'green' }, clicked: false }
// 
log (index) {
    this.todos[index].clicked = true
}

用計算屬性也行，但是肯定要給每個 todo 加個狀態(tài)標(biāo)識。

2018年9月5日 21:00
編輯回答
空白格

用數(shù)據(jù)來進行操作，可以在todos里面沒一條屬性增加一個字段，利用事件對象去操作這個字段，這樣就可以了。不過這樣做可能對新添加的屬性是沒有效果的，可以委托給ol來完美實現(xiàn)。代碼不貼了。應(yīng)該很好理解的

2017年11月26日 10:31