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

相关推荐
风无雨10 分钟前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!11 分钟前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
记得早睡~4 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
安分小尧5 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员5 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪5 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya5 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81635 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef066 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪6 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试