todolist vue

功能 html 数组，增加，删除

vue    v-for  v-if  的使用

示例如下

<template>
  <div class="todolist">
  <input type="text" @change="tjrw" v-model="xrw"  /> <span>请输入任务</span><br>
 <span>正在进行的任务</span><br>
    <div v-for="(item,index) in rws"   :key="index" >
      <span  v-if="item.zt==false"  ><input type="checkbox" v-model="item.zt"/>---{{item.nr}}---<input type="button" value="删除" @click="shanc(index)"/> </span>
    </div>
      
 <span>已经完成的任务</span>
   <div v-for="(item,index) in rws"   :key="index">
      <span  v-if="item.zt==true" ><input type="checkbox"  v-model="item.zt"/>---{{item.nr}}---<input type="button" value="删除" @click="shanc(index)"/> </span>
    </div>
   </div>
</template>
<script>
export default {
  name:'todolist',
  data(){
      return{
        xrw:'',
        rws:[
          {
            zt:false,
            nr:'开开心心'
          },
           {
            zt:false,
            nr:'发财'
          }
          ,
           {
            zt:true,
            nr:'变帅'
          }
          ]
      }
  },
  methods: {
    shanc:function(index){
    this.rws.splice(index,1)//删除数组
        alert('删除成功')
    },
    tjrw:function(){
           const a ={
             zt:false,
              nr:this.xrw
           }
    this.rws.push(a)//添加数组
    }
    
  },
}
</script>