<!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;
background-color: aliceblue;
text-align: center;
cursor: pointer;
}
/* .text div:nth-child(1){
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;
}
.list.active {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="header" id="app">
<div class="input">
<input type="text" placeholder="请输入" ref="inputref" v-model="message" />
<button @click="haddleadd()">添加</button>
</div>
<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>
<div class="cart">
<!-- <h3>所有</h3> -->
<ul>
<li v-for="item in currentarr" :key="item.id">
<input type="checkbox" v-model="item.complate" />
<div>{{item.text}}</div>
<button @click="remove(item.id)">删除</button>
</li>
</ul>
</div>
<!-- <div class="cart">
<h3>已完成</h3>
<ul>
<li v-for="item in computetode" :key="item.id">
<input type="checkbox" v-model="item.complate"/>
<div>{{item.text}}</div>
<button >删除</button>
</li>
</ul>
</div>
<div class="cart">
<h3>未完成</h3>
<ul>
<li v-for="item in uncomputetode" :key="item.id">
<input type="checkbox" v-model="item.complate"/>
<div>{{item.text}}</div>
<button >删除</button>
</li>
</ul>
</div> -->
<div class="clear">
<div></div>
<button @click="removeall()">清除</button>
</div>
</div>
<script src="lib/vue.global.js"></script>
<script>
var todeid = 1
</script>
<script>
const {
createApp
} = Vue
const app = createApp({
data() {
return {
message: '',
arr: [],
type: 'all',
currentarr: []
}
},
computed: {
computetode() {
return this.arr.filter(item => item.complate == true)
},
uncomputetode() {
return this.arr.filter(item => item.complate == false)
},
},
methods: {
haddleadd() {
this.$refs.inputref.focus()
if (this.message.trim() != '') {
this.arr.push({
id: todeid++,
complate: false,
text: this.message.trim()
})
}
console.log(this.arr)
},
remove(id){
this.arr=this.arr.filter(item=>item.id!=id)
},
removeall(){
this.arr=[]
},
check(types) {
this.type = types文章来源：https://www.toymoban.com/news/detail-798193.html
}
},
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.mount('#app')
</script>
</body>
</html>文章来源地址https://www.toymoban.com/news/detail-798193.html
到了这里，关于Vue待办事项（选项卡）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
