vue 数组添加多个值_Vue 笔记整理07

最新推荐文章于 2024-07-04 10:26:29 发布

weixin_39619270

最新推荐文章于 2024-07-04 10:26:29 发布

阅读量1.9k

点赞数

文章标签： vue 数组添加多个值

本文链接：https://blog.csdn.net/weixin_39619270/article/details/112534678

版权

本文介绍了Vue中的v-for遍历数组和对象的语法，强调了在遍历过程中使用索引值的方法。同时，文章讨论了组件的key属性在虚拟DOM更新中的作用，解释了为何需要key来提高效率。最后，文章讨论了Vue中如何检测并更新数组，特别是使用数组方法如push、splice等与DOM更新的关系。

摘要由CSDN通过智能技术生成

七、循环遍历

? v-for遍历数组

? 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。格式如下：item in items的形式。

? 我们来看一个简单的案例：

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for遍历数组title>
head>
<body>
  <div id="app">
    
    <ul>
      <li v-for="item in names" >{{item}}li>
    ul>
    
    <ul>
        <li v-for="(item,index) in names"  >{{index+":"+item}}li>
    ul>
  div>
  <script src=src="src="../js/vue.js">script>
  <script>const app = new Vue({el:"#app",data:{names:["zzz","ttt","yyy"]
      }
    })script>
body>
html>

? 如果在遍历的过程中不需要使用索引值,则

v-for="movie in movies"

依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie

如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？

语法格式：

v-for=(item, index) in items

其中的index就代表了取出的item在原数组的索引值。

一般需要使用索引值。{{index+":"+item}}index表示索引，item表示当前遍历的元素。

? v-for遍历对象

? v-for可以用于遍历对象：比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for遍历对象title>
head>
<body>
  <div id="app">
    
    
    <ul>
      <li v-for="(item,key) in user" >{{key+"-"+item}}li>
    ul>
    
    <ul>
      <li v-for="(item,key,index) in user" >{{key+"-"+item+"-"+index}}li>
    ul>

  div>
  <script src="../js/vue.js">script>
  <script>const app = new Vue({el:"#app",data:{user:{name:"zzz",height:188,age:24
        }
      }
    })script>
body>
html>

❝
?注意?: 遍历过程没有使用index索引，{{key+"-"+item}}，item表示当前元素是属性值，key表示user对象属性名。遍历过程使用index索引，index表示索引从0开始。
❞

? 组件的key属性

? 官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

? 为什么需要这个key属性呢(了解)？

这个其实和Vue的虚拟DOM的Diff算法有关系。这里我们借用React’s diff algorithm中的一张图来简单说明一下：当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。即把C更新成F，D更新成C，E更新成D，最后再插入E。

? 是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识.Diff算法就可以正确的识别此节点，找到正确的位置区域插入新的节点。所以一句话，key的作用主要是为了高效的更新虚拟DOM。

? v-for使用key

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for使用keytitle>
head>
<body>
  <div id="app">
    
    <ul>
      <li v-for="item in letters">{{item}}li>
    ul>
    <button @click="add1">没有keybutton>
    
    <ul>
        <li v-for="item in letters" :key="item">{{item}}li>
    ul>
    <button @click="add2">有keybutton>
  div>
  <script src="../js/vue.js">script>
  <script>const app = new Vue({el:"#app",data:{letters:['a','b','c','d','e']
      },methods: {
        add1(){this.letters.splice(2,0,'f')
        },
        add2(){this.letters.splice(2,0,'f')
        }
      }
    })script>
body>
html>

❝
?注意?: 不加key渲染时候会依次替换渲染，加了key会直接将其放在指定位置，加key提升效率。
❞

? 检测数组更新

? 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

html><html lang="en"><head><meta charset="UTF-8"><title>数组的响应式方法 title>head><body><div id="app"><ul><li v-for="item in letters">{{item}}li>ul><button @click="btn1">pushbutton><br><button @click="btn2">通过索引值修改数组button>div><script src="../js/vue.js">script><script>const app = new Vue({el:"#app",data:{letters:['a','b','c','d','e']
      },methods: {
        btn1(){//1.pushthis.letters.push('f')//2.pop()删除最后一个元素//this.letters.pop()//3.shift()删除第一个//this.letters.shift()//4.unshift()添加在最前面,可以添加多个//this.letters.unshift('aaa','bbb','ccc')//5.splice():删除元素/插入元素/替换元素//splice(1,1)在索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素//splice(index,0,'aaa')在索引index后面删除0个元素，加上'aaa',//splice(1,1,'aaa')替换索引为1的后一个元素为'aaa'// this.letters.splice(2,0,'aaa')//6.sort()排序可以传入一个函数//this.letters.sort()//7.reverse()反转// this.letters.reverse()
        },
        btn2(){this.letters[0]='f'
        }
      }
    })script>body>html>

❝
?注意?: btn2按钮是通过索引值修改数组的值，这种情况，数组letters变化，DOM不会变化。而数组的方法，例如push()、pop()、shift()、unshift()、splice()、sort()、reverse()等方法修改数组的数据，DOM元素会随之修改。

splic()：删除元素、插入元素、替换元素

splice(1,1):在索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素

splice(index,0,'aaa')索引index后面删除0个元素，加上'aaa'

splice(1,1,'aaa')替换索引为1的后一个元素为'aaa'
❞