原理很簡單，寫一個input框，定義一個空的list，當在input中增加數據時，就往list中添加數據，然后在循環這個list的數據，刪除數據就是調用list中的splice
<template>
<div id="app">
<h1>{{ msg }}</h1>
<input type="text" v-model="todo"/>
<button @click="addData">增加數據</button>
<hr>
<br>
<ul>
<li v-for="(item,key) in list">
{{item}}--------<button @click="delteData(key)">刪除數據</button>
</li>
</ul>
</div>
</template>
<script>
/*
雙向數據綁定，用於表單,
*/
export default {
name: 'app',
data () {
return {
msg: 'hello',
todo: '',
list:[]
}
},methods:{
addData(){
//alert("111")
this.list.push(this.todo);
this.todo='';
},delteData(key){
this.list.splice(key,1)
}
}
}
</script>
<style>
h1, h2 {
font-weight: normal;
}
.box{
width: 100px;
height: 100px;
background-color: #42b983
}
</style>
