首页 > 其他分享 >Vue案例——todolist

Vue案例——todolist

时间：2023-01-02 11:11:07浏览次数：41  
标签：Vue todolist border 案例 1px done todo id todos

最近在学习vue，实现todolist案例，实现效果如下：

 

 

 该案例分为四个部分：header为输入框，body为列表，item是列表中的条目，footer为最下方的统计。

实现步骤：

①创建项目

 

vue create 'vue_test'

 

②创建静态样式，创建vue组件，App统领全局，其他子组件在components中，UserHeader、UserList、UserItem、UserFooter

App：

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
      <!--将函数传给header-->
        <user-header></user-header>
<!--        将数据给list-->
        <user-list/>
        <user-footer />
      </div>
    </div>
  </div>

</template>

<script>
import userFooter from "@/components/UserFooter";
import userList from "@/components/UserList";
import userHeader from "@/components/UserHeader";

export default {
  name: "App",
  components: {
    userFooter,
    userHeader,
    userList
  },
  //将数据给list
  data(){
    return{
      todos:[
        {id:'001',title:'吃饭',done:true},
        {id:'002',title:'喝酒',done:true},
        {id:'003',title:'开车',done:false}
      ]
    }
  }</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>

Header:

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
  </div>
</template>

<script>
export default {
  name: "userHeader",
}
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

list

<template>
  <ul class="todo-main">
<!--    将数据给item-->
    <user-item/>
  </ul>
</template>

<script>
import userItem from "@/components/UserItem";
export default {
  name: "userList",
  components:{userItem}
}
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>

Item:

<template>
  <li>
    <label>
      <input type="checkbox"/>
      <span>xxxx</span>
    </label>
    <button class="btn btn-danger">删除</button>
  </li>
</template>

<script>
export default {
  name: "userItem",
}
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover{
  background-color: #42b983;
}
li:hover button{
  display: block;
}
</style>

Footer

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox"/>
    </label>
    <span>
          <span>已完成0</span> / 全部4
        </span>
    <button class="btn btn-danger">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "userFooter"
}
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>

③进行数据交互

将App的数组传递给List显示

<!--App中-->
<user-list :todos="todos">

<!--List中-->
export default {
  name: "userList",
  components:{userItem},
  props:['todos']//接收数据
}
<!--传递数据-->
<user-item v-for="todo in todos" :obj="todo" :key="todo.id">

<!--在Item接收数据-->
props:['obj']
<label>
      <input type="checkbox"/>
      <span>{{obj.title}}</span>
</label>

④实现header的添加功能

<!--添加键盘事件-->
<div class="todo-header">
    <input type="text" @keyup.enter="add" placeholder="请输入你的任务名称，按回车键确认"/>
</div>

<!--实现方法-->
import {nanoid} from 'nanoid' //生成id，通过npm i nanoid引入,保证id的唯一性
methods:{
  add(e){
    //校验数据
    if(!e.target.value){
      alert("输入不能为空")
      return
    }
  //  将用户的输入包装成一个todo对象
    const todoObj={id:nanoid(),title:e.target.value,done:false}
    //通知app组件添加对象
    this.addTodo(todoObj)
    e.target.value=''
  }
}
<!--在App中实现addTodo-->
addTodo(obj){
  this.todos.unshift(obj)
}

④实现勾选功能

//  取消或勾选选择，在App中实现，同时将方法暴露出去，List作为中转站
    checkTodo(id){
      this.todos.forEach((todo)=>{
        if(todo.id === id){
          todo.done = !todo.done
        }
      })
    }
//在Item中进行数据交互
<input type="checkbox" :checked="obj.done" @change="handleChange(obj.id)"/>
//在item中获取对象id，传到App中的checkTodo
handleChange(id){
  this.checkTodo(id)
}

⑤实现删除功能

//通过过滤器实现
//  删除todo
    delTodo(id){
      this.todos = this.todos.filter((todo)=>{
        return todo.id !== id
      })
    }
//List作为中转，Item中操作，通过id删除
delObj(id){
  if(confirm('确定删除吗?')){
    this.delTodo(id)
  }
}
 

⑥实现底部已完成和未完成比例



<label>
  <input type="checkbox" :checked="isChecked" @click="checkAll"/>
</label>



<!--通过计算属性得出，已完成为done值为true，全部为对象个数-->
<span>
          <span>已完成{{doneTotal}}</span> / 全部{{total}}
</span>


computed:{
  doneTotal(){
    /*let count = 0
    this.todos.forEach((todo)=>{
      if(todo.done) count++
    })
    return count*/
    //调用次数为函数长度
    return this.todos.reduce((pre,todo)=>{
      return pre + (todo.done ? 1 : 0)
    },0)
  },
  total(){
    return this.todos.length
  },
//判断是否选中，防止所有条目删除后出现bug


isChecked(){
  return this.doneTotal === this.total && this.total > 0
}


}



⑦全选或取消全选，Footer





<user-footer :todos="todos"
             :checkAllTodo="checkAllTodo"
              :clearAllTodo="clearAllTodo"/>



//  全选或取消全选，在App中实现，传递到Footer
    checkAllTodo(done){
      this.todos.forEach((todo)=>{
        todo.done=done
      })
    },
//在Footer中实现


checkAll(e){
  this.checkAllTodo(e.target.checked)
},



⑧清除已完成任务



//  清除已经完成的todo
    clearAllTodo() {
      this.todos = this.todos.filter((todo)=>{
        return !todo.done
      })
    }


clearChecked(){
  this.clearAllTodo()
}



以下是完整代码：




<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
      <!--将函数传给header-->
        <user-header :addTodo="addTodo"></user-header>
<!--        将数据给list-->
        <user-list
            :todos="todos"
            :checkTodo="checkTodo"
            :delTodo="delTodo"
        />
        <user-footer :todos="todos"
                     :checkAllTodo="checkAllTodo"
                      :clearAllTodo="clearAllTodo"/>
      </div>
    </div>
  </div>

</template>

<script>
import userFooter from "@/components/UserFooter";
import userList from "@/components/UserList";
import userHeader from "@/components/UserHeader";

export default {
  name: "App",
  components: {
    userFooter,
    userHeader,
    userList
  },
  //将数据给list
  data(){
    return{
      todos:[
        {id:'001',title:'吃饭',done:true},
        {id:'002',title:'喝酒',done:true},
        {id:'003',title:'开车',done:false}
      ]
    }
  },
  methods:{
    //添加todo
    addTodo(obj){
      this.todos.unshift(obj)
    },
  //  取消或勾选选择
    checkTodo(id){
      this.todos.forEach((todo)=>{
        if(todo.id === id){
          todo.done = !todo.done
        }
      })
    },

  //  删除todo
    delTodo(id){
      this.todos = this.todos.filter((todo)=>{
        return todo.id !== id
      })
    },
  //  全选或取消全选
    checkAllTodo(done){
      this.todos.forEach((todo)=>{
        todo.done=done
      })
    },
  //  清除已经完成的todo
    clearAllTodo() {
      this.todos = this.todos.filter((todo)=>{
        return !todo.done
      })
    }
  }
}
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>


App



<template>
  <ul class="todo-main">
<!--    将数据给item-->
    <user-item
        :checkTodo="checkTodo"
        :delTodo="delTodo"
        v-for="todo in todos"
        :key="todo.id"
        :obj="todo" />
  </ul>
</template>

<script>
import userItem from "@/components/UserItem";
export default {
  name: "userList",
  components:{userItem},
  props:['todos','checkTodo','delTodo']
}
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>


UserList



<template>
  <li>
    <label>
      <input type="checkbox" :checked="obj.done" @change="handleChange(obj.id)"/>
<!--      <input type="checkbox" v-model="obj.done"/> 使用双向数据绑定v-model修改props中的值,不建议使用-->
      <span>{{obj.title}}</span>
    </label>
    <button class="btn btn-danger" @click="delObj(obj.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "userItem",
  props:['obj','checkTodo','delTodo'],
  methods:{
    handleChange(id){
      this.checkTodo(id)
    },
    delObj(id){
      if(confirm('确定删除吗?')){
        this.delTodo(id)
      }
    }
  }
}
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover{
  background-color: #42b983;
}
li:hover button{
  display: block;
}
</style>


UserItem



<template>
  <div class="todo-footer" v-show="total">
    <label>
      <input type="checkbox" :checked="isChecked" @click="checkAll"/>
    </label>
    <span>
          <span>已完成{{doneTotal}}</span> / 全部{{total}}
        </span>
    <button class="btn btn-danger" @click="clearChecked">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "userFooter",
  props:['todos','checkAllTodo','clearAllTodo'],
  computed:{
    doneTotal(){
      /*let count = 0
      this.todos.forEach((todo)=>{
        if(todo.done) count++
      })
      return count*/
      //调用次数为函数长度
      return this.todos.reduce((pre,todo)=>{
        return pre + (todo.done ? 1 : 0)
      },0)
    },
    total(){
      return this.todos.length
    },
    isChecked(){
      return this.doneTotal === this.total && this.total > 0
    }
  },
  methods:{
    checkAll(e){
      this.checkAllTodo(e.target.checked)
    },
    clearChecked(){
      this.clearAllTodo()
    }
  }
}
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>


UserFooter

 



标签：Vue,todolist,border,案例,1px,done,todo,id,todos	

From： https://www.cnblogs.com/jzz-111jy/p/17019611.html
      

      




      

      

        
相关文章

        

          
    
 
  • 校招前端二面高频vue面试题
    vue-router中如何保护路由分析路由保护在应用开发过程中非常重要，几乎每个应用都要做各种路由权限管理，因此相当考察使用者基本功。体验全局守卫：constrouter=createR......
     
  • vue为什么v-for的优先级比v-if的高？
    前言有时候有些面试中经常会问到v-for与v-if谁的优先级高，这里就通过分析源码去解答一下这个问题。下面的内容是在当我们谈及v-model，我们在讨论什么?的基础上分析的，所以......
     
  • vue的生命周期
    <!DOCTYPEhtml><html>	<head>		<metacharset="utf-8"/>		<title></title>		<scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script>	</head......
     
  • new Vue的时候到底做了什么
    Vue加载流程1.初始化的第一阶段是Vue实例也就是vm对象创建前后：首先Vue进行生命周期，事件初始化发生在beforeCreate生命周期函数前，然后进行数据监测和数据代理的初始化，也就......
     
  • vue2 项目25
    app.js:<template><divid="app"><router-view></router-view></div></template><stylelang="less">body,html{margin:0;padding:0;height......
     
  • 2023前端二面高频vue面试题集锦
    vuex是什么？怎么使用？哪种功能场景使用它？Vuex是一个专为Vue.js应用程序开发的状态管理模式。vuex就是一个仓库，仓库里放了很多对象。其中state就是数据源存放地，对应于......
     
  • Vue3的响应系统
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content=......
     
  • Android笔记--案例：登录界面以及登录逻辑
    登录界面的实现就是说，界面的绘制，并没有什么难度，只要控制好空间的分配就可以了登录的逻辑实现获取验证码、忘记密码的界面跳转、登录的实现：确认文本框的输入内......
     
  • Android笔记--案例：找回密码
    找回密码具体实现：登录成功：报告密码不同：报告验证码错误：代码相关：找回密码的界面很简单，不细说了，直接写就行找回密码的逻辑实现：下一次就去写数据存储啦！拜拜！......
     
  • 企业级低代码平台，JeecgBoot-Vue3版 v1.3.0 版本正式发布
    项目介绍Jeecgboot-Vue3采用Vue3.0、Vite、Ant-Design-Vue、TypeScript等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。Je......
     
    •            
          

        

      

    

    

      
赞助商

      




      

      
阅读排行

      

        
      

    

  





  
 
    
网站主页关于我们联系我们网站地图 

    
本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。 

    
Copyright © 2020-2023  IPS99  版权所有 IPS99