• 做一个vue的todolist列表


    <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
     
  • 相关阅读:
    Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-CSRF-TOKEN'.
    Qt 下快速读写Excel指南(尘中远)
    QT 那些事
    安卓环境下,通过QT调用jar包
    android使用C/C++调用SO库
    雷军曾定下目标,2017年将聚焦5大核心战略,分别是:黑科技、新零售、国际化、人工智能和互联网金融五大部分
    Maven和Gradle
    链接生成接口
    孤儿进程和僵尸进程
    Case when 的使用方法
  • 原文地址:https://www.cnblogs.com/fpcbk/p/10753932.html
Copyright © 2020-2023  润新知