vue 练手demo todolist

最终效果：

组件代码：

 <template>
    <div class="todolist">
        <!-- header -->
        <div class="header">
            任务计划列表
        </div>
        <!-- 添加任务 -->
        <div class="addlist">
            <h2>添加任务</h2>
            <input type="text" class="input-list" v-model=input v-on:keyup.enter='addlist'
            placeholder="例如吃饭睡觉打豆豆 提示按回车键即可添加">
        </div>
        <!-- 导航区 -->
        <div class="navlist">
            <p class="numlist">{{numlist}}个任务未完成</p>
            <div class="navbtn">
                <button @click="allList">所有任务</button>
                <button @click="unfinished">未完成的任务</button>
                <button @click="finished">完成的任务</button>
            </div>
        </div>
        <!-- 任务列表 -->
        <div class="list">
            <p>任务列表</p>
            <ul id='allList'>
                <li v-show=flag v-for="(item,index) in list" :key=index ref='isItem' class="fatherli">
                   <input type="checkbox" @click="chooseItem($event,index)"> 
                   {{item}}
                </li>
                <!-- 未添加任务 -->
                <p class="nolist" v-show=flag2>还没有添加任何任务</p>
            </ul>
        </div>
       
   </div>
</template>

<script type="text/ecmascript-6">
import $ from'jquery'
  export default {
     data() {
     return {
         input: '',  //用户输入的任务
         numlist:'0',  //几个任务未完成
         list:['吃饭','睡觉','打豆豆','打游戏'], //任务清单
         flag:true,  //任务列表展示
         flag2:false,   //没有添加任何任务展示
     }
    
     },
     mounted(){
         //初始化时 让未完成的个数等于计划的个数
         this.numlist = this.list.length;
         //用计划的个数 判断哪个界面显示与否
        if(this.list.length>=1){
            this.flag=true;
            this.flag2=false;
        }else{
            this.flag=false;
            this.flag2=true;          
        }
     },
     methods:{
         //输入按回车添加计划
        addlist(){
            //console.log("添加成功")
            if(this.input==''){
                alert("请填写内容")
            }else{
                this.list.push(this.input);
            }
            this.input='';
        //根据项目个数判断界面显示与否    
            this.numlist = this.list.length;
            if(this.list.length>=1){
                this.flag=true;
                this.flag2=false;
            }else{
                this.flag=false;
                this.flag2=true;
            }
        },
        //点击复选框 将event和index传入
        chooseItem(e,index){
            //console.log(this.$refs.isItem[0].style)
            //console.log(e.target.checked)
            //判断如果选中
            if(e.target.checked==true){
                 //console.log(index)
                 this.$refs.isItem[index].style.color = '#ccc'
                 this.$refs.isItem[index].style.textDecoration = 'line-through'
                 let checkNum = $("input[type='checkbox']:checked").length
                 //console.log($("input[type='checkbox']:checked").length);
                 this.numlist=this.list.length-checkNum;
        }
        //如果未选中
           else if(e.target.checked==false){
                //console.log("2")
                this.$refs.isItem[index].style.color = '#000'
                this.$refs.isItem[index].style.textDecoration = 'none'
                let checkNum = $("input[type='checkbox']:checked").length
                //console.log($("input[type='checkbox']:checked").length);
                this.numlist=this.list.length-checkNum;
        }
     },
     //所有计划
     allList(){
         $('#allList').children('li').show();
     },
     //未完成计划
     unfinished(){
         //让所有选中的input的父元素全部隐藏  未完成
        $("input[type='checkbox']:checked").parent().hide()
        $("input[type='checkbox']:not(:checked)").parent().show()
        //let unfinishedNum = this.list.length-checkNum;
     },
     //已完成计划
     finished(){
         $("input[type='checkbox']:checked").parent().show()
         $("input[type='checkbox']:not(:checked)").parent().hide()
     } 
  }
  }
</script>             

<style scoped >
.header{
    width: 100%;
    height: 50px;
    margin-top:100px;
    background: #cd1b2d;
    color: aliceblue;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
}
 .addlist{
     max-width: 600px;
     margin:20px auto;
 }
 .input-list{
     width: 400px;
     height: 30px;
     margin-top: 20px;
 }
 .navlist{
     max-width: 600px;
     margin:20px auto;
     display: flex;
     justify-content: space-between;
 }
 .numlist{
     color: #cd1b2d;
 }
 .navbtn button{
     margin-left: 20px;
 }
 .list{
    max-width: 600px;
    margin:30px auto; 
 }
 .list ul {
     margin-top:20px;
 }
 .list ul li{
     list-style: none;
     width: 300px;
     height: 50px;
     background: #ffffff;
     padding-left:30px;
 }
  .list ul li input{
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-top:15px;
      margin-right: 10px;
  }
  .nolist{
      width: 300px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: #cd1b2d;
      margin-top:20px;
  }
  .thisClass{
      color: #ccc;
      text-decoration: line-through;
  }
 .noClass{
     color:black;
 }
</style>