Vue组件--todolist
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div id="app">
<div class="container">
<mheader :list="list" @addinfo="addsome"></mheader>
<ul class="list-group">
<mlist v-for="(item,index) in list" :key="item.id" :item="item" :index="index" @del="delsome"></mlist>
</ul>
</div>
</div>
<script>
Vue.component("mheader",{
data(){
return {
user:"",
content:""
}
},
props:["list"],
template:`
<div class="header">
<div class="form-group">
<label for="user">执行人</label>
<input type="text" class="form-control" v-model="user" id="user"/>
</div>
<div class="form-group">
<label for="content">内容</label>
<input type="text" class="form-control" v-model="content" id="content" @keyup.enter="addinfo"/>
</div>
<div class="form-group">
<button class="btn btn-danger" @click="addinfo">发送</button>
</div>
</div>
`,
methods:{
addinfo(){
if (this.user.length==0||this.content.length==0) {
alert("输入内容不能为空")
return
}
var obj = {
id:this.list.length+1,
user:this.user,
content:this.content
}
this.$emit("addinfo",obj)
this.user=""
this.content=""
}
}
})
Vue.component("mlist",{
data(){
return {
}
},
props:["item","index"],
template:`
<li class="list-group-item">
<input type="checkbox" @click="del"/>
{{item.content}}
<span class="badge">
{{item.user}}
</span>
</li>
`,
methods:{
del(){
// console.log(this.list)
this.$emit("del",this.index)
}
}
})
new Vue({
el:"#app",
data:{
list:[
{id:1,user:"Asa",content:"回家打扫"}
]
},
methods:{
addsome(obj){
// console.log(obj)
this.list.push(obj)
},
delsome(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
效果：