2回答

• 

  White_Windmill

  2018-11-07 16:51:58

  提供一个思路：

  在v-bind里面使用三目运算符 判断是否完成 完成添加完成的样式 否则就是正常样式

  0 0
• 

  张小颠001

  2018-11-07 12:25:05

  <div id="app">
  

  <h1 v-html='title'></h1>

  <input v-model='newItem' v-on:keyup.enter='addNewItem'>

  <button @click="addNewItem">ADD</button>

  <ul>

  <li v-for="item in items" v-bind:class="[{finished:item.isFinished},item.color]" @click="finish(item)">{{item.label}}</li>

  </ul>  

  </div>

  <script>

  new Vue{

  el:'#app',

  data(){

  return{

  title:'this is a todo list!',

  items:

  [

  {

  label:'code',

  isFinished:true,

  color:'red',

  },

  {

  label:'run',

  isFinished:false,

  color:'red',

  }

  ],

  newItem:'',

  }

  },

  methods:

  {

  finish:function (item)

  {

  item.isFinished=!item.isFinished

  },

  addNewItem:function ()

  {

  if(this.newItem!='')

  {

  this.items.push({

  label:this.newItem,

  isFinished:false,

  color:'red',

  })

  this.newItem=''

  }

  },

  },

  }

  </script>

  
  

  <style>

  #app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

  }

  .finished{

  text-decoration: underline;

  }

  .red{

  color: red;

  }

  </style>

  点击Li，增加underline，再点击变为none

  
  

  0 0