Vue待办事项(组件,模块化)

//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

相关推荐
EricWang13589 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning9 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人19 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00120 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92139 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂41 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf