v-for的使用

最新推荐文章于 2023-08-09 09:57:02 发布
最新推荐文章于 2023-08-09 09:57:02 发布
阅读量195 收藏
点赞数 1
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59359854/article/details/126126472
版权

v-for遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 1.遍历过程没有使用索引（下标值） -->
    <ul>
      <li v-for="item in names" >{{item}}</li>
    </ul>
    <!-- 2.遍历过程有使用索引（下标值） -->
    <ul>
        <li v-for="(item,index) in names"  >{{index+":"+item}}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        names:["zzz","ttt","yyy"]
      }
    })
  </script>
</body>
</html>

​ 一般需要使用索引值。<li v-for="(item,index) in names" >{{index+":"+item}}</li>index表示索引，item表示当前遍历的元素。

v-for遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 1.遍历过程没有使用index索引-->
    <!-- 格式为：(value, name) -->
    <ul>
      <li v-for="(item,key) in user" >{{key+"-"+item}}</li>
    </ul>
    <!-- 格式为：(value, name, index) -->
    <ul>
      <li v-for="(item,key,index) in user" >{{key+"-"+item+"-"+index}}</li>
    </ul>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        user:{
          name:"zzz",
          height:188,
          age:24
        }
      }
    })
  </script>
</body>
</html>
  1. 遍历过程没有使用index索引，<li v-for="(item,key) in user" >{{key+"-"+item}}</li>，item表示当前元素是属性值，key表示user对象属性名。
  2. 遍历过程使用index索引，index表示索引从0开始。

v-for使用key

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-for使用key</title>
</head>
<body>
  <div id="app">
    <!-- 不加key如果要插入f依次改变 -->
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="add1">没有key</button>
    <!-- 加key如果要插入f使用diff算法高效,如果使用index做key一直变，所以item如果唯一可以使用item-->
    <ul>
        <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
    <button @click="add2">有key</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/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>
  1. 使用key可以提高效率，加key如果要插入f使用diff算法高效,如果使用index做key一直变，所以item如果唯一可以使用item。
  2. 不加key如果要插入f依次替换。 一、什么是虚拟dom？ 虚拟dom 其实就是一个普通的JavaScript对象，用来描叙试图上有哪些界面结构，并不生成界面，我们可以在生命周期【mounted阶段】打印this._vnode，
1. 虚拟DOM中key的作用：
	key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
	随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

	2.对比规则：
	(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
		①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
		②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

		(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
		创建新的真实DOM，随后渲染到到页面。

		3. 用index作为key可能会引发的问题：
		1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
		会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

		2. 如果结构中还包含输入类的DOM：
		会产生错误DOM更新 ==> 界面有问题。

		4. 开发中如何选择key?:
		1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
		2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
		使用index作为key是没有问题的。

v-for加key与不加

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

数组的响应方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>数组的响应式方法 </title>
</head>
<body>
  <div id="app">
    <!-- 数组的响应式方法 -->
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btn1">push</button><br>
    <button @click="btn2">通过索引值修改数组</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        letters:['a','b','c','d','e']
      },
      methods: {
        btn1(){
          //1.push
          this.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>

  1. btn2按钮是通过索引值修改数组的值，这种情况，数组letters变化，DOM不会变化。

  2. 而数组的方法，例如push()、pop()、shift()、unshift()、splice()、sort()、reverse()等方法修改数组的数据，DOM元素会随之修改。

  3. push()：在最后添加元素

    pop()：删除最后一个元素

    shift()：删除第一个元素

    unshift()：添加在最前面，可以添加多个

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

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

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

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

还可以改变其引用类型重新赋值改变

北风吹画州
关注
vue——列表循环
weixin_54362381的博客
08-21 6235
Vue中的列表渲染 官网文档： https://cn.vuejs.org/v2/guide/list.html. 一、数组循环: 1、v-for中的in和of是一样的效果，二者都可以遍历数组和对象.建议使用v-for-of 更接近迭代器的语法. 2、(item,index) of list中的index代表下表标 3、:key="item.id中key值(唯一的)推荐使用item.id,为了提升性能(尽量别用index做key值) 4、修改数组内容的时候,不能直接通过修改index(list[下标])来修改
router-link结合v-for使用（跳转详情）
weixin_45616142的博客
08-24 1781
router-link结合v-for使用： 今天实现列表页跳转到详情页 我没有用编程式导航 用的router-link实现跳转 <template> <div class="jingpin"> <div class="jingpinclass">{{battleList[1].channel_info.name}}</div> <router-link class="jingpinbox" v-for="(ele,index) in
遍历循环
qq_33879627的博客
09-21 592
（八）遍历循环 8.1 v-for遍历数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l
Vue的循环遍历
helongzhi的博客
08-02 8217
​ 一般需要使用索引值。index表示索引，item表示当前遍历的元素。
vue的循环遍历(v-for)
热门推荐
韩旭不会敲代码吧的博客
08-01 3万+
1.循环遍历 1.循环遍历: vue的循环遍历用v-for，语法类似于js中的for循环 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。 2.v-for使用格式： 格式为：v-for = "item in items" (遍历items中的数据) 2.v-for遍历数组 1.v-for遍历数组 用v-for指令基于一个数组来渲染一个列表。 v-for 指令使用item in items形式的语法， 其中items是源
Vue：循环遍历（v-for）
yufengguanyun的博客
03-05 1万+
1、v-for （1）遍历数组 直接遍历，不使用下标 <div id="app"> <ul> <li v-for="item in names">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app',
vue中v-for的最佳使用技巧
努力是为了站在万人中央成为别人的光
08-18 1591
在vuejs中，v-for 的使用是比较常见的，它允许您在模板代码中编写for循环。那么在使用v-for的时候，可曾思考过使用这个指令的一些技巧吗？ 在介绍它的使用技巧之前，我先介绍下它的基本用法吧，在vue中v-for可以遍历数组、对象、字符串，但是用的最多的还是遍历数组，基本方法如下： <div id="app"> <ul> <li v-for='item in list'> {{ item.name }} </li> </ul&g
v-for中使用ref属性
believet93的博客
05-12 1万+
在v-for循环中使用ref会用一个问题，如果使用绑定 :ref 会发现，使用js是无法对绑定的元素进行操作的，原因在vue官网中有说明。但是还是希望能够在v-for中使用ref并且能够使用js对每个元素进行操作，这里就不要使用绑定的方式。下面给出了v-for中使用两种不同方式的实验结果，使用绑定的方式会报错，不使用绑定的方式可以操作成功。 1、v-for中使用ref，绑定的方式 <template> <div> <div class="main" @clic
【前端知识之Vue】v-if 和 v-for 的使用
weixin_44337386的博客
06-15 1709
本系列主要整理前端面试中需要掌握的知识点。本节介绍 v-if 和 v-for 的使用。
三、vue ：定义变量、v-for、v-on示例
周国良的博客
03-25 1816
一、vue定义变量 let：定义常量 const：定义变量 二、vue循环 v-for <div id="app" > <ul> <li v-for="name in names"></li> </ul> </div> <script src="./js/vue.js"></script> <script> const app = new Vue({ e
vue的for循环使用方法
10-17
在本篇文章里小编给大家整理了关于vue的for循环使用方法和步骤，有需要的朋友们跟着学习下。
vue遍历对象中的数组取值示例
10-16
今天小编就为大家分享一篇vue遍历对象中的数组取值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue forEach循环数组拿到自己想要的数据方法
10-17
今天小编就为大家分享一篇vue forEach循环数组拿到自己想要的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于Vue前端js循环遍历数组的几种方法：
weixin_49826079的博客
08-09 2170
关于Vue前端js循环遍历数组的几种方法：
Vue,v-for循环遍历方式
cxu123321的博客
09-01 1万+
Vue,v-for循环遍历方式 1.v-for循环普通数组 item是自定义名称， in后面加的是 list这个普通数组 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="...
vue的v-for循环遍历数组和数组中的数组
m0_51514677的博客
04-07 727
【代码】vue的v-for循环遍历数组和数组中的数组。
Vue前端js循环遍历数组八种方法总结最新
m0_49714202的博客
01-25 3万+
前五种常用，第三种个人觉得常用最多，自己复制代码打印试试 var arr = [1, 2, 3, 4, 5, 6]; // 第一种 for循环遍历 var newArr = []; for(var i = 0; i < arr.length; i++){ newArr.push(arr[i]) console.log(newArr) } // 第二种 es6语法 arr.forEach()遍历 var newArr =
VUE基础知识 v-for循环遍历数组
qq_42860495的博客
07-24 1822
1.先在本地模拟一个数组（项目中后端会给） data(){ return{ orders:[ { text:"苹果"， price:"35.5", num:"5", }, { text:"橘子", price:"25.5", num:"6", }, { text:"葡萄", price:"35", ...
VUE的for循环
培根芝士的专栏
03-22 658
VUE的三种for循环方式
v-for使用Radio
最新发布
08-08
如果你想要在一个列表中使用`v-for`结合Radio按钮（单选框），你可以这样做： ```html <li v-for="item in items" :key="item.id"> :value="item.value" :name="groupName" v-model="selectedValue"> {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值