组件方式开发todolist
<template>
<div id="App">
<input v-model="inputValue" />
<button @click="submit">Submit</button>
<ul>
<todoItem
v-for="(item,index) in List"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todoItem>
</ul>
</div>
</template>
<script>
import todoItem from "@/components/item.vue";
export default {
data: function() {
return {
List: [],
inputValue: ""
};
},
components: {
todoItem
},
methods: {
submit: function() {
if (this.inputValue != "") {
this.List.push(this.inputValue);
}
this.inputValue = "";
},
handleDelete: function(index) {
this.List.splice(index, 1);
}
}
};
</script>
<template>
<li @click="deleteItem">{{content}}</li>
</template>
<script>
export default {
props: ["content", "index"],
data: function() {
return {};
},
methods: {
deleteItem: function() {
this.$emit("delete", this.index);
}
}
};
</script>
页:
[1]