用简单一种方法写
用vue组件写
第一步利用了父传子
第二步利用了子传父
<script src="../vue.min.js"></script>
<body>
<div id="app">
<h1>ToDoList<input type="text" @keyup.enter="addthing" v-model="thing"></h1>
<!-- 需求是 当鼠标按下的时候输入表格的值 添加到 正在进行 里面的数据 让其显示
有二个所以用组件写 详情看下面操作
来什么二个空的数据来接收他俩的值
-->
<!-- 然后把定义的组件写在页面上 -->
<!-- 这是正在进行 -->
<!--@监听自定义的属性 里面为值 -->
<list :list1="reject" @toggle="toggle11"></list>
<!-- 这是已经完成 -->
<list :list1="resolve" @toggle="toggle12"></list>
</div>
<script>
//因为dom结构一样 定义一个组件让父共用子的这个组件
// 这里面有数据 共用的数据
const List = {
props:['list1'],
template: `
<div>
<h1><span>正在进行</span>-----------<span>{{list1.length}}</span></h1>
<ul>
<li v-for="(item,index) in list1" @click="toggle(index)">{{item}} --------<span @click.stop="del(index)">del</span></li>
</ul>
</div>
`,
methods: {
toggle(index){
//记住上面还有点击所以用来发送他的值
// 参数一为自定义属性 2为接收要点击的哪个索引值
this.$emit('toggle',index)
},
del(index){
this.list1.splice(index,1)
}
}
}
// 需求分析:1. 用户填完信息回车后,将信息存入数组
var vm = new Vue({
el: '#app',
data: {
thing: '', //这是获取表单的值 使其最初显示为空
//声明二个空数组 这二个是接收上面那二个传的值 然后在dom结果里面进行渲染
reject: [],
resolve: []
},
methods: {
addthing() {
this.reject.push(this.thing);
this.thing = ''
},
toggle11(index){
this. resolve.push(this.reject[index]);
this.reject.splice(index,1)
},
toggle12(index){
this.reject.push(this.resolve[index]);
this. resolve.splice(index,1)
}
},
components: {
List
}
});
</script>
</body>
大概样式