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

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

<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: '整個(gè)牛項(xiàng)目', liStyle: { color: 'green' } }
      ],
      defaultStyle: {
        color: 'blue'
      }
    };
  },
  methods: {
    log: function () {
      console.log(this);
    }
  }
};
</script>

回答

編輯回答

毀與悔

可以加個(gè)狀態(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: '整個(gè)牛項(xiàng)目', liStyle: { color: 'green' }, clicked: false }
// 
log (index) {
    this.todos[index].clicked = true
}

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

2018年9月5日 21:00

編輯回答

空白格

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

2017年11月26日 10:31