vue-test
/
todolist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <div>
                    <h2>我的前端学习计划</h2>
                    <h6>
                        <a href="">共有{{list.length}}个计划</a>
                        <a href="">已完成{{cmp}}个计划</a>
                        <a href="">未完成{{list.length-cmp}}个计划</a>
                    </h6>
                </div>
            </el-header>
            <el-main><div>
                <el-row>
                    <el-col :span="20"><div class="grid-content bg-purple"><el-input v-model="input" placeholder="请输入内容"></el-input></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light">
                        <el-button type="info"  @click="btnadd" >添加计划</el-button></div></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24"><div class="grid-content bg-purple-dark">
                        <el-tabs type="border-card">
                            <el-tab-pane label="全部计划">
                                <div>
                                    <ul>
                                        <li v-for="(v,i) in list":key="i">
                                            <el-row>
                                                <el-col :span="22"><div>
                                                    <el-checkbox v-model="v.check"><span :class="v.check?'line-through':''">{{v.name}}</span></el-checkbox></div></el-col>
                                                <el-col :span="2"><div style="text-align: center;"><el-button type="text" @click="btndelete(i)">删除</el-button></div></el-col>
                                              </el-row>
                                        </li>
                                    </ul>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="已完成">
                              <div>
                                <ul>
                                    <li v-for="(v,i) in list":key="i" v-show="v.check" >
                                        <el-row>
                                            <el-col :span="22"><div>
                                                <el-checkbox v-model="v.check"><span :class="v.check?'line-through':''">{{v.name}}</span></el-checkbox></div></el-col>
                                            <el-col :span="2"><div style="text-align: center;"><el-button type="text" @click="btndelete(i)">删除</el-button></div></el-col>
                                          </el-row>
                                    </li>
                                </ul>
                            </div>
                            </el-tab-pane>
                            <el-tab-pane label="未完成"><div>
                              <ul>
                                  <li v-for="(v,i) in list":key="i" v-show="!v.check" >
                                      <el-row>
                                          <el-col :span="22"><div>
                                              <el-checkbox v-model="v.check"><span :class="v.check?'line-through':''">{{v.name}}</span></el-checkbox></div></el-col>
                                          <el-col :span="2"><div style="text-align: center;"><el-button type="text" @click="btndelete(i)">删除</el-button></div></el-col>
                                        </el-row>
                                  </li>
                              </ul>
                          </div></el-tab-pane>
                          </el-tabs>
                    </div></el-col>
                  </el-row>
            </div></el-main>
          </el-container>
    </div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>new Vue({
    el:"#app",
    data:{
        input:"",
        list:[{
          name:"去北京旅游",
          check:false
        },{
          name:"去墨西哥旅游",
          check:true
        },{
          name:"去XX旅游",
          check:false
        },{
          name:"去哥伦比亚旅游",
          check:false
        },]
    },
    methods:{
      btndelete(index){
        this.list.splice(index,1)
      },
      btnadd(){
        if (!this.input) return
        this.list.push({
          name:this.input,
          check:false
        })
        this.input=''
      }
    },
    computed:{
      cmp(){
        return this.list.filter(list => list.check ).length
      }
    }
})</script>
<style>
    #app{
        width: 800px;
        margin:  0 auto;
    }
    ul{
        list-style-type: none;
        padding-left: 10px;
    }
    .el-header, .el-footer {
      background-color: #a1b7d3;
      color: #333;
      text-align: center;
      height: 100px!important;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      line-height: 36px;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
    .el-row {
    margin-bottom: 5px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-checkbox__label {
    display: inline-block;
    padding-left: 10px;
    line-height: 36px;
    font-size: 14px;
}
.el-button--text {
    color: #409EFF;
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
    height: 36px;
}
.line-through{
  text-decoration: line-through;
}
  </style>