Todo List

今天来实现一个简单的todo list效果！

点击list改变背景颜色和状态

当我们点击未完成时，会看到list只展示刚刚没有点击的

当点击已完成，list会展示刚刚完成的

 最初我们只选择了10条，现在我们选择20条

添加

欧克，这就是我们要完成的效果，冲鸭！

首先我们需要在vuex里面创建数组来存放我们请求的数据(此处记得安装axios)

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list:[]
  },
  mutations: {
    SET_LIST(state,data){
      state.list=data
    }
  },
  actions: {
    async getList({commit},limit){
      let res=await axios.get(`http://jsonplaceholder.typicode.com/posts?`,{
        params:{
          _limit:limit//这个是用来做筛选
        }
      })
      commit('SET_LIST',res.data)
      console.log(res.data);
    }
  },
  modules: {
  }
})

 此时我们已经请求到数据

 1.样式(建议自己动手写)

<template>
  <div class="home">
    <h1>add todo</h1>
    <div class="seatch">
      <input type="text" placeholder="请输入..." v-model="val">
      <button @click="add">添加</button>
    </div>
    <p class="screen">
      筛选:<select v-model="listnum">
            <option v-for="item in Lit" :key="item.id">{{item.title}}</option>
          </select>
    </p>
    <div class="btn">
      <p><button @click="cli=0">查看所有</button></p>
      <p><span class="off"></span><button @click="cli=1">未完成</button></p>
      <p><span class="ok"></span><button @click="cli=2">已完成</button></p>
    </div>
    <div class="matter">
      <h2>待办事项：</h2>
      <ul>
        <li v-for="item,index in List" :key="item.id" @click="change(item.id)" :class="{'active':item.state}">{{index+1}}--{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>

<style lang="less" scoped>

.home{
  width: 1000px;
  margin:  auto;
  .seatch{
    width: 100%;
    margin: 10px 0;
    input{
      width: 93%;
      border: solid 1px #a5c6ad;
      height: 20px;
      padding: 0 10px;
    }
    button{
      height: 20px;
      box-sizing: border-box;
      width: 4%;
    }
  }
  .screen{
    margin: 5px;
  }
  .btn{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px;
    button{
      border: none;
      outline: none;
      background: #edf6ed;
    }
    .off{
      display: block;
      height: 15px;
      width: 15px;
      background: #88be88;
      float: left;
      vertical-align: middle;
    }
    .ok{
      display: block;
      height: 15px;
      width: 15px;
      background: #3e4a64;
      float: left;
      vertical-align: middle;
    }
  }
  .matter{
    ul{
      list-style: none;
      width: 100%;
      li{
        text-align: center;
        width: 32%;
        float: left;
        height: 60px;
        margin-top: 10px;
        // background: #3e4a64;
        // color: white;
        background: #88be88;
        margin-right: 10px;
        line-height: 30px;
        font-weight: 700;
        border-radius: 5px;
      }
      .active{
        background: #3e4a64;
        color: #fff;
      }
    }
  }
}
</style>

2.循环数组，渲染到页面

运用mapState把vuex中的数据(list)拿过来，当然此时可以在页面循环(如果你不介意报错  : )   )

我们在查看所有、未完成和已完成三个按钮上绑定了事件，所以我们利用过滤器来根据点击list之后转换li的状态筛选。

data(){
    return {
      cli:0//默认最初查看全部
    }
  },
created(){
    this.$store.dispatch('getList')
  },
  computed:{
    ...mapState(['list']),
    List(){//li循环这个筛选后的数组
      switch(this.cli){
        case 0:
          return this.list
        case 1:
          return this.list.filter(item=>!item.state)
        default:
          return this.list.filter(item=>item.state)
      }
    }
  },

此时刷选功能是没有写的，所以我们直接把100条数据全部渲染上页面。

那我们怎么实现这个效果嘞？

首先，当我们筛选几条数据的时候，我们还是循环List数组，所以我们可以把方法知己写到Lis里面。其次，等我们点击筛选之前坑定需要一个默认的条数，也就是用户第一次打开页面展示的数据条数。再者，考虑一下我们需要用什么方法完成筛选？

我们可以用到slice方法

 So easy !

筛选按钮也可以用循环。

const Lit=[{
            id:0,
            title:10
          },{
            id:1,
            title:20
          },{
            id:2,
            title:30
          },{
            id:3,
            title:40
          },{
            id:4,
            title:50
          },{
            id:5,
            title:60
          },{
            id:6,
            title:70
          },{
            id:7,
            title:80
          },{
            id:8,
            title:90
          },{
            id:9,
            title:100
          }]

data(){
    return {
      Lit,
      cli:0,
      listnum:10//初始化数据10条
    }
  },
created(){
    this.$store.dispatch('getList')
  },
  computed:{
    ...mapState(['list']),
    List(){
      switch(this.cli){
        case 0:
          // return this.list
          return this.list.slice(0,this.listnum);
        case 1:
          // return this.list.filter(item=>!item.state)
          return this.list.slice(0,this.listnum).filter(item=>!item.state)
        default:
          // return this.list.filter(item=>item.state)
          return this.list.slice(0,this.listnum).filter(item=>item.state)
      }
    }
  },

3.添加效果

绑定点击事件，获取input的值，在将值加入到页面循环的数组

data返回input的值

data(){
    return {
      Lit,
      cli:0,
      listnum:10,
      val:''
    }
  },

methods:{
    add(){
      this.list.unshift({
        id:new Date().getTime(),//时间戳，用当前添加时的时间当id，这样id就不会重复啦
        title:this.val,//input的值
        state:false//li的初始状态为false
      })
      this.val = ''//点击添加之后input的值自动清空
    }
}

4.点击li，改变li的状态和背景颜色

绑定点击事件。

change(id){
      let arr = [...this.list]//扩展符
      //console.log(arr)
      arr.map(item=>{
        if(item.id==id){
          item.state = !item.state
        }
      })
      this.$store.commit('SET_LIST',arr)
      console.log(arr)
    },

欧了，加油冲鸭！