用vue实现todos,todos里面包含了增删改查功能,不会的看过来,保准你会!!!

一.先写静态页面,然后把静态页面分组件划分,最后再写效果,效果有增删改查。

二.效果展示:

用vue实现todos,todos里面包含了增删改查功能,不会的看过来,保准你会!!!

 三.代码展示:

todos.css:

*{
	padding: 0;
	margin: 0;
}
ul,ol,li{
	list-style: none;
}
body{
	background-color: #F5F5F5;
}
#app{
	width: 550px;
	margin: 10px auto;
	
}
.title{
	height: 150px;
	line-height: 150px;
	color: #EAD7D7;
	font-size: 80px;
	font-weight: bold;
	text-align: center;
	width: 100%;
}
.con{
	width: 100%;
	background-color: #fff;
}
.top{
	width: 100%;
	position: relative;
	display: flex;
	background-color: #fff;
	align-items: center;
	border-bottom: 1px solid #E6E6E6;
}
#inp{
	width: 100%;
	padding-left: 40px;
	box-sizing: border-box;
	height: 40px;
	outline: none;
	border: 0;
	margin: 10px 0;
	color: #E6E6E6;
	font-size: 16px;
}
.select{
	position: absolute;
	
	width: 40px;
	height: 40px;
	margin: 10px 0;
	color: #999;
	text-align: center;
	line-height: 40px;
	font-weight: 600;
	font-size: 24px;
	transform: rotate(90deg);
}
.selbol{
	color: #333;
}
.center{
	width: 100%;
}
.list li{
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #E6E6E6;
	display: flex;
	align-items: center;
	background-color: #fff;
	justify-content: center;
	border-bottom: 1px solid #E6E6E6;
}
.choose{
	background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E') no-repeat center;
	background-size: 24px 24px;
	width: 40px;
	height: 40px;
	
	
}
.info{
	height: 40px;
	line-height: 40px;
	color: #4d4d4d;
	font-size: 16px;
	flex: 1;
}

.list .checked .choose{
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}
.list .checked .info{
	text-decoration: line-through;
	color: #d9d9d9;
}
.delete{
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	margin-right: 10px;
	color: red;
}
.bottom{
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
}
.count{
	width: 80px;
	margin-left: 20px;
	height: 30px;
	line-height: 30px;
	color: #999;
}
.tab{
	height: 30px;
	margin-left: 30px;
	display: flex;
	align-items: center;
}
.tabBox{
	padding:0 5px ;
	height: 20px;
	line-height: 20px;
	color: #999;
	margin: 0 5px;
	border: 1px solid transparent;
}
.tabSelect{
	border-color: #999;
}
.clear{
	height: 20px;
	line-height: 20px;
	margin-left: 50px;
	color: #999;
}

组件:

TopVote.vue:

<template>
    <div class="top">
        <input type="text" placeholder="What needs to be done?" id="inp" :value='value' @input="$emit('input',$event.target.value)" @keyup.enter='$emit("addEvent")'>
        <div :class=" {'select':true,'selbol':boo}"  @click='$emit("booEvent")'> > </div>
    </div>
</template>
<script>
export default {
    props:['value','boo']
}
</script>

CenterVote.vue:

<template>
    <div class="center">
        <ul class="list">
          <li
            v-for="(item, index) in showList"
            :class="{ checked: item.finished }"
            :key="item.id"
            @mouseover="item.show = true"
            @mouseout="item.show = false"
          >
            <div class="choose" @click="$parent.one(item)"></div>
            <div class="info">{{ item.value }}</div>
            <div class="delete" v-show="item.show" @click="$parent.delet(index)">X</div>
          </li>
        </ul>
      </div>
</template>
<script>
export default {
    props:['showList']
}
</script>

BottomVote.vue:

<template>
    <div class="bottom">
        <div class="count">
          <span class="num">{{ $parent.numbe }}</span> item left
        </div>
        <div class="tab">
          <div
            :class="{ tabBox: true, tabSelect: $parent.active == 'all' }"
            @click="$parent.active = 'all'"
          >
            All
          </div>
          <div
            :class="{ tabBox: true, tabSelect: $parent.active == 'no' }"
            @click="$parent.active = 'no'"
          >
            Active
          </div>
          <div
            :class="{ tabBox: true, tabSelect: $parent.active == 'yes' }"
            @click="$parent.active = 'yes'"
          >
            Completed
          </div>
        </div>
        <div class="clear" v-show="$parent.ssBoo" @click="$parent.clearAll">
          Clear completed
        </div>
      </div>
</template>
<script>
export default ({
    props:[]
})
</script>

Todos.vue:

<template>
  <div>
    <div class="title">TODOS</div>
    <div class="con">
      <TopVote :value="val" @input="change" @addEvent="add" @booEvent='booFn' :boo='boo'/>

      <CenterVote :showList='showList'/>
      <BottomVote :active='active'/>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import TopVote from "./TopVote.vue";
import CenterVote from "./CenterVote.vue";
import BottomVote from "./BottomVote.vue";
export default {
  components: {
    TopVote,
    CenterVote,
    BottomVote
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem("list")) || [],
      showList: [],
      // boo:false,
      val: "",
      active: "all",
      // ssBoo:false
    };
  },
  methods: {
    add() {
      //添加数据
      if (this.val.trim() != "") {
        this.list.push({
          id: new Date().getTime(),
          value: this.val,
          finished: false,
          show: false,
        });
        this.val = "";
      }
    },
    change(value) {
      this.val = value;
    },
    delet(index) {
      //删除单个
      this.list.splice(index, 1);
    },
    booFn(){
        this.boo=!this.boo;
    },
    // all(){ //全选/反选
    //     this.boo=!this.boo;
    //     for(let item in this.list){
    //         this.list[item].finished=this.boo;
    //     }

    // },
    one(item) {
      item.finished = !item.finished;
      // let bol=true;
      // for(let i  in this.list){
      //     if(!this.list[i].finished){
      //         bol=false;
      //         break;
      //     }
      // }
      // this.boo=bol;
    },
    clearAll() {
      this.list = this.list.filter((item) => {
        return !item.finished;
      });
    },
  },
  watch: {
    list: {
      handler(value) {
        if (this.active == "all") {
          this.showList = value;
        } else if (this.active == "no") {
          this.showList = value.filter((item) => !item.finished);
        } else {
          this.showList = value.filter((item) => item.finished);
        }
        localStorage.setItem("list", JSON.stringify(value));
      },
      deep: true,
      immediate: true,
    },
    active(value) {
      if (value == "all") {
        this.showList = this.list;
      } else if (value == "no") {
        this.showList = this.list.filter((item) => !item.finished);
      } else {
        this.showList = this.list.filter((item) => item.finished);
      }
    },
  },
  computed: {
    numbe: {
      //计算未完成数值
      get() {
        let num = 0;
        this.list.map((item) => {
          if (!item.finished) {
            num++;
          }
        });
        return num;
      },
    },
    boo: {
      //计算全选/反选
      get() {
        let bol = true;
        for (let i in this.list) {
          if (!this.list[i].finished) {
            bol = false;
            break;
          }
        }
        return bol;
      },
      set(value) {
        for (let item in this.list) {
          this.list[item].finished = value;
        }
      },
    },
    ssBoo: {
      //批量删除是否隐藏
      get() {
        let shows = this.list.some((item) => {
          return item.finished;
        });
        return shows;
      },
    },
  },
};
</script>

App.vue:

<template>
  <div id="app">
    <todos />
  </div>
</template>
<script>
import Todos from "./components/Todos.vue";
export default {
  name: "App",
  components: {
    Todos,
  },
};
</script>
<style lang="scss">
@import url("assets/todos.css");
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
#app {
  // font-size: 40px;
  text-align: center;
  color: #2c3e50;
}
</style>

main.js:

// 引入vue
// import Vue from 'vue/dist/vue'
import Vue from 'vue'

// 引入App组件  是所有组件的父组件
import App from './App.vue'

// import "./assets/demo"

import "bootstrap/dist/css/bootstrap.css"
// 关闭vue的生产提示
Vue.config.productionTip = false

// 创建vue实例 
new Vue({
  render: h => h(App),

  // render(createElement){
  //   return createElement('h1','标题')
  // }

  // template:'<h2>标题</h2>'
  
}).$mount('#app')

 本篇文章主要讲述了用vue实现todos效果,有代码展示,欢迎观看!!!

上一篇:如何用express框架搭建node服务(路由、中间件、接口、日志、控制器)


下一篇:5月26日 node总结