[TOC]
## pages=>Home.vue
```
<template>
<div class="home">
<input v-model="value">
<button @click="handleClick">增加</button>
<ul>
<list-item
v-for="(item,index) of list"
:key="index"
:inx="index"
:item="item"
@delete="handleDelete"
></list-item>
</ul>
</div>
</template>
<script>
import ListItem from "../components/ListItem";
export default {
name: "home",
components:{
ListItem
},
data() {
return {
value: "hello world",
list:[]
};
},
methods: {
handleClick() {
if (!this.list.includes(this.value)&&this.value!="") {
this.list.push(this.value);
this.value = "";
}
},
handleDelete(index) {
this.list.splice(index, 1);
}
}
};
</script>
<style lang="scss" scoped>
</style>
```
## compontents=>ListItem.vue
```
<template>
<div>
<li @click="handleDelete">{{item}}</li>
</div>
</template>
<script>
export default {
name: "ListItem",
props: {
item: {
type: String
},
inx:{
type:Number
}
},
methods:{
handleDelete(){
this.$emit("delete",this.inx)
}
}
};
</script>
```
