vue todolist 1.0

时间:2021-10-28 11:16:35
 <template>

   <div id="app"> 

       <input type="text" v-model='todo' />

       <button @click="doAdd()">+增加</button>

       <br>

       <hr>

       <br>

       <ul>

         <li v-for="(item,key) in list">

           {{item}}   ----  <button @click="removeData(key)">删除</button>
</li>
</ul> </div>
</template> <script> export default {
data () {
return {
todo:'' ,
list:[]
}
},
methods:{ doAdd(){
//1、获取文本框输入的值 2、把文本框的值push到list里面 this.list.push(this.todo); this.todo='';
},
removeData(key){ // alert(key) //splice js操作数组的方法 this.list.splice(key,1);
}
} }
</script> <style lang="scss"> </style>