码迷,mamicode.com
首页 > 其他好文 > 详细

做一个vue的todolist列表

时间:2019-04-23 00:17:26      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:获取   mamicode   his   put   efs   remove   add   dom节点   info   

技术图片

<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 技术图片

 

 

 

做一个vue的todolist列表

标签:获取   mamicode   his   put   efs   remove   add   dom节点   info   

原文地址:https://www.cnblogs.com/fpcbk/p/10753932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!