目录
任务描述:
完成待办事项记录,在输入框中输入待办事项,点击“添加”按钮,进入未完成项列表中,同时数量+1;点击未完成项中的“删除”按钮,待办事项进入已完成列表,未完成项的数量-1,已完成项的数量+1。
效果图:
代码如下:
<body>
<h3>最近完成的计划</h3>
<div id="memorandum">
<input type="text" v-model="text">
<button @click="add">添加</button>
<br>
未完成{{item.length}}项
<br>
<ul v-show="item.length">
<li v-for="(items, index) in item">
{{items}}
<button @click="del(index)">删除</button>
</li>
</ul>
已完成{{doitem.length}}项
<br>
<ul>
<li v-for="(doitems, index) in doitem">
{{doitems}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#memorandum',
data: {
item: [],
doitem: [],
text: '',
},
methods: {
add: function () {
this.item.push(this.text);
this.text = "";
},
del: function (index) {
this.doitem.push(this.item[index]);
this.item.splice(index, 1);
}
}
})
</script>
</body>
觉得还不错就给个赞吧!