//html页面代码
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ??? ?* {
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ?}
?? ??? ??? ?ul,
?? ??? ??? ?ol {
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ?}
?? ??? ??? ?.header {
?? ??? ??? ??? ?width: 400px;
?? ??? ??? ??? ?margin: 0px auto;
?? ??? ??? ??? ?margin-top: 50px;
?? ??? ??? ??? ?box-shadow: 1px 1px 5px 5px;
?? ??? ??? ?}
?? ??? ??? ?.input {
?? ??? ??? ??? ?padding: 10px;
?? ??? ??? ??? ?height: 30px;
?? ??? ??? ??? ?display: flex;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?.input input{
?? ??? ??? ??? ?padding-left: 10px;
?? ??? ??? ??? ?flex: 1;
?? ??? ??? ?}
?? ??? ??? ?.input button{
?? ??? ??? ??? ?width: 60px;
?? ??? ??? ??? ?height: 30px;
?? ??? ??? ?}
?? ??? ??? ?.text {
?? ??? ??? ??? ?padding: 10px;
?? ??? ??? ??? ?display: flex;
?? ??? ??? ?}
?? ??? ??? ?.text .list {
?? ??? ??? ??? ?flex: 1;
?? ??? ??? ??? ?
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?cursor: pointer;
?? ??? ??? ?}
?? ??? ??? ?/* ?? ?.text div:nth-child(1){
?? ??? ??? ??? ?background-color: black;
?? ??? ??? ??? ?color: white;
?? ??? ??? ??? ?
?? ??? ??? ?} */
?? ??? ??? ?.text .active {
?? ??? ??? ??? ?background-color: black;
?? ??? ??? ??? ?color: white;
?? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?.cart {
?? ??? ??? ??? ?padding: 10px;
?? ??? ??? ?}
?? ??? ??? ?.cart li {
?? ??? ??? ??? ?height: 20px;
?? ??? ??? ??? ?display: flex;
?? ??? ??? ??? ?margin-bottom: 10px;
?? ??? ??? ?}
?? ??? ??? ?.cart li div {
?? ??? ??? ??? ?flex: 1;
?? ??? ??? ??? ?padding-left: 10px;
?? ??? ??? ?}
?? ??? ??? ?.cart li input {
?? ??? ??? ??? ?height: 20px;
?? ??? ??? ??? ?width: 20px;
?? ??? ??? ?}
?? ??? ??? ?.clear {
?? ??? ??? ??? ?padding: 10px;
?? ??? ??? ??? ?display: flex;
?? ??? ??? ?}
?? ??? ??? ?.clear div {
?? ??? ??? ??? ?flex: 1;
?? ??? ??? ?}
?? ??? ? ? ?
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="header" id="app">
?? ??? ??? ?<my-input @add="addcartin"></my-input>
?? ??? ? ? <my-text :type="type" @blue="tab" :computetode="computetode" :uncomputetode="uncomputetode" :arr="arr"></my-text>
?? ? ? ? ? <my-cart :list=" currentarr" @remove="remove" ></my-cart>
?? ??? ? ?<my-clear @clear="removeall"></my-clear>
?? ??? ?</div>
?? ??? ?<script type="module">
?? ??? ??? ?import { createApp } from './lib/vue.esm-browser.js'
?? ??? ??? ?import ?AddOptions from './components/tode-input.js'
?? ??? ??? ?import AddText from './components/tode-text.js'
?? ??? ??? ?import AddCart from './components/tode-cart.js'
?? ??? ??? ?import AddFooter from './components/tode-footer.js'
?? ??? ??? ?var itemid=1
?? ??? ??? ?const app = createApp({
?? ??? ??? ??? ?data() {
?? ??? ??? ??? ??? ?return {
?? ??? ? ? ? ? ? ? ? ? arr:[],
?? ??? ??? ??? ??? ? ? type:'all',
?? ??? ??? ??? ??? ? ? currentarr:[]
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?computed: {
?? ??? ??? ??? ??? ?computetode() {
?? ??? ??? ??? ??? ??? ?return this.arr.filter(item => item.complate == true)
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?uncomputetode() {
?? ??? ??? ??? ??? ??? ?return this.arr.filter(item => item.complate == false)
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?},
?? ??? ??? ??? ?methods:{
?? ??? ??? ??? ??? ?addcartin(title){
?? ??? ??? ??? ??? ??? ?this.arr.push({
?? ??? ??? ??? ??? ??? ??? ?id:itemid++,
?? ??? ??? ??? ??? ??? ??? ?complate:false,
?? ??? ??? ??? ??? ??? ??? ?title
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?removeall(data){
?? ??? ??? ??? ??? ??? ?this.arr=data
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?remove(id){
?? ??? ??? ??? ??? ??? ?this.arr=this.arr.filter(item=>item.id!=id)
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?tab(data){
?? ??? ??? ??? ??? ??? ?this.type=data
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?watch: {
?? ??? ??? ??? ??? ?uncomputetode() {
?? ??? ??? ??? ??? ??? ?if (this.type == 'every') {
?? ??? ??? ??? ??? ??? ??? ?this.currentarr = this.uncomputetode
?? ??? ??? ??? ??? ??? ?} else if (this.type == 'some') {
?? ??? ??? ??? ??? ??? ??? ?this.currentarr = this.computetode
?? ??? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ??? ?this.currentarr =this.arr
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?type: {
?? ??? ??? ??? ??? ??? ?handler(newtype) {
?? ??? ??? ??? ??? ??? ??? ?console.log(newtype)
?? ??? ??? ??? ??? ??? ??? ?switch (newtype) {
?? ??? ??? ??? ??? ??? ??? ??? ?case 'all':
?? ??? ??? ??? ??? ??? ??? ??? ??? ?this.currentarr = this.arr
?? ??? ??? ??? ??? ??? ??? ??? ??? ?break
?? ??? ??? ??? ??? ??? ??? ??? ?case 'some':
?? ??? ??? ??? ??? ??? ??? ??? ??? ?this.currentarr = this.computetode
?? ??? ??? ??? ??? ??? ??? ??? ??? ?break
?? ??? ??? ??? ??? ??? ??? ??? ?case 'every':
?? ??? ??? ??? ??? ??? ??? ??? ??? ?this.currentarr = this.uncomputetode
?? ??? ??? ??? ??? ??? ??? ??? ??? ?break
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ?immediate: true,
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?})
?? ??? ??? ?app.component('MyInput', AddOptions)
?? ??? ??? ?app.component('MyText',AddText)
?? ??? ??? ?app.component('MyCart',AddCart)
?? ??? ??? ?app.component('MyClear',AddFooter)
?? ??? ??? ?app.mount('#app')
?? ??? ?</script>
?? ?</body>
</html>
//tode-cart.js代码
var AddCart={
?? ??? ??? ??? ?template:`
?? ??? ??? ??? ?<div class="cart">
?? ??? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ??? ?<li v-for="item in list">
?? ??? ??? ??? ??? ??? ??? ?<input type="checkbox" ?v-model="item.complate" :key="item.id"/>
?? ??? ??? ??? ??? ??? ??? ?<div>{{item.title}}</div>
?? ??? ??? ??? ??? ??? ??? ?<button @click="remove(item.id)">删除</button>
?? ??? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?`,
?? ??? ??? ??? ?
?? ??? ??? ??? ? ?props: ['list'],
?? ??? ??? ??? ? ?methods:{
?? ??? ??? ??? ??? ? ?remove(id){
?? ??? ??? ??? ??? ??? ? ?this.$emit('remove',id)
?? ??? ??? ??? ??? ? ?}
?? ??? ??? ??? ? ?}
?? ??? ??? ??? ? ?
?? ??? ??? ?}
export default AddCart
//tode-footer.js代码
var AddFooter={
?? ??? ??? ??? ?template:`
?? ??? ??? ??? ?<div class="clear">
?? ??? ??? ??? ??? ?<div></div>
?? ??? ??? ??? ??? ?<button @click="removeall()">清除</button>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?`
?? ??? ??? ??? ?,
?? ??? ??? ??? ?methods:{
?? ??? ??? ??? ??? ?removeall(data){
?? ??? ??? ??? ??? ??? ?this.$emit('clear',[])
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?
?? ??? ??? ?}
export default AddFooter
//tode-input.js代码
? ? var AddOptions={
?? ??? ??? ??? ?template:`
?? ??? ??? ??? ?<div class="input">
?? ??? ??? ??? ?<input type="text" placeholder="请输入" ref="inputref" ?v-model="message"/>
?? ??? ??? ??? ?<button @click="haddleadd()">添加</button>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?`,
?? ??? ??? ? ?data(){
?? ??? ??? ??? ? ?return{
?? ??? ??? ??? ??? ? message:''?
?? ??? ??? ??? ? ?}
?? ??? ??? ? ?},
?? ??? ??? ? ?methods:{
?? ??? ??? ??? ? ?haddleadd(data){
?? ??? ??? ??? ??? ? ?this.$emit("add",this.message)
?? ??? ??? ??? ? ?}
?? ??? ??? ? ?}
?? ??? ??? ?}
export default AddOptions
//tode-text.js代码
var ?AddText={
?? ??? ??? ??? ?template:`
?? ??? ??? ??? ?<div class="text">
?? ??? ??? ?<div class="list" :class="type=='all'? 'active' : '' " @click="check('all')">所有待办事项({{arr.length}})
?? ??? ??? ?</div>
?? ??? ??? ?<div class="list" :class="type=='some'? 'active' : '' " @click="check('some')">
?? ??? ??? ??? ?已完成({{computetode.length}})</div>
?? ??? ??? ?<div class="list" :class="type=='every'? 'active' : '' " @click="check('every')">
?? ??? ??? ??? ?未完成({{uncomputetode.length}})</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?`,
?? ??? ??? ??? ?props:['type','arr','uncomputetode','computetode'],
?? ??? ??? ??? ?methods:{
?? ??? ??? ??? ??? ?check(item){
?? ??? ??? ??? ??? ??? ?this.$emit('blue',item)
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
export default AddText