<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件化toDoList</title>
<script src="../js/vue221.js"></script>
</head>
<body>
//需求：当在input框中输入留言后添加到显示区域 (即：#app中)所以需要双向数据绑定
<div id="app">
<input type="text" v-model="title">
<button @click="add()">添加</button>
<hd v-for="(item,index) in arr" :key="index" :content="item" :index="index" @hand="remove"></hd>
</div>
<script>
//vue组件之间的参传递
//父组件与子组件传值
//父组件传给子组件：子组件通过 props[]方法接收数据
//子组件给父组件传值：通过$emit进行传输
Vue.component("hd",{
props["content","index"], //content接收的是item中的数据
tempalte:"<div>{{content}}<button @click="del()">删除</button></div>", //Dom结构
data:function(){
return {
}
},
methods:{
del:function(){
this.$emit("hand",this.index)
}
}
})
var vm=new Vue({
el:"#app",
data:{
arr:["天气不错","哈哈"],
title:""
},
methods:{
add:function(){
this.arr.push(this.title);
this.title=""
},
remove:function(){
this.arr.splice(index,1)
}
}
})
</script>
</body>
</html>
复制代码vue组件化的ToDoList
最新推荐文章于 2024-07-23 11:32:13 发布
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
