做一个vue的todolist列表

Posted 2021-02-17

<template>
  <div id="app">
         <input type="text"  v-model="todo" ref="ip"/>
         <button @click="add()">+新增</button>
         <br/>
         <br/>
         <hr/>
        <ul>
            <li v-for="(item,key) in list">
           {{key}} {{item}}   ----- <button v-on:click="remove(key)">删除</button>
            </li>
       </ul>

  </div>
</template>

<script>
export default {
  name: \'app\',
  data () {
    return {
      todo:"",
      list:[]
    }    
  },
  methods:{
      add(){
       var val=this.$refs.ip.value;   或者用this.todo，这两种都可以：this.todo是从model获取input种的值，因为model和view是双向关联。this.$refs.ip.value;则是直接获取view的input的dom节点然后获取text

this.list.push(val);
      this.todo="";
    },
    remove(key){
      this.list.splice(key,1);
    }
}
}
</script>


<style>


</style>

涉及知识点：

 1 记录：js删除数组中某一项或几项的几种方法
 2 1:js中的splice方法
 3 
 4 　　splice(index,len,[item])    注释：该方法会改变原始数组。
 5 
 6 splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值
 7 
 8 index:数组开始下标        len: 替换/删除的长度       item:替换的值，删除操作的话 item为空
 9 
10 如：arr = [\'a\',\'b\',\'c\',\'d\']
11 
12 删除 ----  item不设置
13 
14 arr.splice(1,1)   //[\'a\',\'c\',\'d\']         删除起始下标为1，长度为1的一个值，len设置的1，如果为0，则数组不变
15 
16 arr.splice(1,2)  //[\'a\',\'d\']          删除起始下标为1，长度为2的一个值，len设置的2
17 
18 替换 ---- item为替换的值
19 
20 arr.splice(1,1,\'ttt\')        //[\'a\',\'ttt\',\'c\',\'d\']         替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
21 
22 arr.splice(1,2,\'ttt\')        //[\'a\',\'ttt\',\'d\']         替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1
23 
24  
25 
26 添加 ----  len设置为0，item为添加的值
27 
28 arr.splice(1,0,\'ttt\')        //[\'a\',\'ttt\',\'b\',\'c\',\'d\']         表示在下标为1处添加一项‘ttt’
29 
30 看来还是splice最方便啦
31 
32 2：delete       delete删除掉数组中的元素后，会把该下标出的值置为undefined,数组的长度不会变
33 
34 如：delete arr[1]  //[\'a\', ,\'c\',\'d\']     中间出现两个逗号，数组长度不变，有一项为undefined

35 如何使用 pop() 来删除并返回数组的最后一个元素。
36