入门vue超级简单的todolist备忘录

<template>
    <div id="app">
      <input type='text' v-model="inputValue" />
      <button v-on:click="handleClick">提交</button>
      <ul>
        <li
          v-show="item.text"
          v-for="(item, index) of listData"
          :key='item.id'>{{item.text}}
          <i v-on:click="checkFn(item,index)">改变状态</i>
          <i v-on:click="del(item,index)">{{item.id}}删除</i>
        </li>
      </ul>
    </div>
</template>

<script>
  export default {
    el:'#app',
    data(){
      return{
      inputValue: '',
      listData: [],
      isDone:'',
      }
    },
    methods:{
      handleClick(){
        console.log(this)
        this.listData.push({text:this.inputValue, id: this.createRandomId()})
        console.log(this.listData)
        this.inputValue= ''
      },
      // 勾选已完成
      checkFn(item,index){
        console.log(item.text)
        if(item.text.search('已完成') != -1){
          console.log(item.text.slice(0,item.text.length-3))
          this.$set(this.listData,index,{text:item.text.slice(0,item.text.length-3),id:item.id})
          return
        }
        this.$set(this.listData,index, {text:`${item.text}已完成`,id:item.id})
      },
      // 删除
      del(item,index){
        const data = this.listData
        this.listData.splice(index, 1)
        // this.listData.$delete(index)
        console.log(index, this.listData, 'data')
      },
      // 生成不重复id
      createRandomId() {
        return (Math.random()*10000000).toString(16).substr(0,4)+'-'+(new Date()).getTime()+'-'+Math.random().toString().substr(2,5);
       }
      }
  }
</script>

效果图如下