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

相关推荐
辣条小哥哥几秒前
electron主进程和渲染进程之间的通信
javascript·electron·ecmascript
咖喱鱼蛋1 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder3 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code20 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•5 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html