//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代码文章来源：https://www.toymoban.com/news/detail-811851.html
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文章来源地址https://www.toymoban.com/news/detail-811851.html
到了这里，关于Vue待办事项（组件，模块化）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
