<!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文章來源：http://www.zghlxwxcb.cn/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>文章來源地址http://www.zghlxwxcb.cn/news/detail-798193.html
到了這里，關(guān)于Vue待辦事項（選項卡）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
