首页 > 其他分享> 文章详细

Todo List

2021-09-30 21:58:29 阅读：149 来源： 互联网

标签：return title List list item state Todo id

今天来实现一个简单的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)
    },

欧了，加油冲鸭！

标签：return,title,List,list,item,state,Todo,id
来源： https://blog.csdn.net/oo_ring/article/details/120572046

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Todo List