<template>
<div style="width:400px;margin:auto">
<span>请输入待办事项</span>
<input type="text" placeholder="请输入待办事项" v-model="item">
<button class="js-submit" v-on:click="submit">提交</button>
<h1>待完成</h1>
<ul>
<li v-for="(thing,index) in items" v-bind:key="thing.id" v-if="!thing.isDone">
<input type="checkbox" v-model="thing.isDone"/>{{thing.label}}<input type="button" value="删除" v-on:click="deleteItem(index)"/>
</li>
</ul>
<h1>已完成</h1>
<ul>
<li v-for="(thing,index) in items" v-bind:key="thing.id" v-if="thing.isDone">
<input type="checkbox" v-model="thing.isDone"/>{{thing.label}}<input type="button" value="删除" v-on:click="deleteItem(index)"/>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
item: "",
items: [],
checked: false
};
},
methods: {
submit: function() {
this.items.push({
label: this.item,
isDone: false
});
this.item = "";
},
deleteItem: function(index) {
this.items.splice(index, 1);
}
}
};
</script>
最简单的vue todolist
最新推荐文章于 2019-03-19 20:03:59 发布