首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue列表渲染的示例代码

Posted in Javascript onNovember 01, 2018

用v-for把一个数组对应为一个组件元素

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法：

<ul>
 <li v-for="item in items">
  {{ item.message }}
 </li>
</ul>

var vm = new Vue({
 el: '#el',
 data: {
  items: [
   {message: 'foo'},
   {message: 'boar'}
  ]
 }
})

在v-for块中，我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。

<ul>
 <li v-for="(item, index) in items">
  {{ item.message }} {{ index }}
 </li>
</ul>

var vm = new Vue({
 el: '#el',
 data: {
  items: [
   {message: 'foo'},
   {message: 'bar'}
  ]
 }
})

也可以用of替代in作为分隔符，因为它是最接近JavaScript迭代器的语法：

<div v-for="item of items"></div>

一个对象的v-for

也可以使用v-for通过对一个对象的属性迭代。

new Vue({
 el: '#el',
 data: {
  object: {
   firstName: 'h',
   lastName: 'z',
   age: 26
  }
 }
})

<ul id="v-for-object" class="demo">
 <li v-for="value on object">
  {{ value }}
 /li>
</ul>

也可以提供第二个参数为名：

<div v-for="(value, key) in object">
 {{ key }} : {{ value }}
</div>

第三个参数为索引：

<div v-for="(value, key, index) in object">
 {{index}}. {{key}}: {{value}}
</div>

Key

当Vue使用v-for正在更新已渲染过的元素列表时，它默认就地复用。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是简单的复用此处每个元素，并且 确保它在特定索引下显示已被渲染过的每个元素。

这个默认的模式是高效的，但只适用于不依赖子组件状态或零时DOM状态的列表渲染输出。

为了给Vue一个提示，以便追踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。理想的key值是每项都有唯一id。它的工作方式类似于一个属性，所以你需要用v-bind来绑定动态值：

<div v-for="item in items" :key="item.id">
</div>

建议尽可能在使用v-for时提供key，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上提升。

数组更新检测

(1)变异方法

Vue包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

(2)替换数组

变异方法，是会改变被这些方法调用的原始数组。相比之下也有非变异方法：

filter()
concat()
slice()

这些方法不会改变原始数组，但是总会返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组:

ex.items = ex.items.filter(function(item) {
 return item.message.match(/Foo/)
})

你可能认为这将导致Vue丢弃现有DOM并重新渲染整个列表。Vue为了使得DOM得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

注意事项

由于JavaScript的限制，Vue补?呢检测以下变动的数组：

1. 当你用索引直接设置一个项的时候：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLenth

举个例子：

var vm = new Vue({
 data: {
  items: ['a','b','c']
 }
})
vm.items[1] = 'x' //不是响应式的
vm.items.length = 2// 不是响应式的

为了解决第一类问题，以下两种方式都可以实现vm.items[i] = newVal相同的效果，同时也会触发响应式更新：

//Vue.set
Vue.set(vm.items, i, newVal)

//Array.prototype.splice
vm.items.splice(i, 1, newVal)

也可以使用vm.$set实例方法，该方法是全局方法Vue.set的一个别名：

vm.$set(vm.items, i, newVal)

为了解决第二类问题，可以使用splice:

vm.items.splice(newLenght)

对象更改检测注意事项

由于JavaScript的限制，Vue不能检测对象属性的添加或删除：

var vm = new Vue({
 data: {
  a: 1
 }
})
//vm.a是响应式的
//vm.b不是响应式的

对于已经创建的实例，Vue不能动态添加根级别的响应式属性，但是可以通过Vue.set(obj,key,value)方法向嵌套对象添加响应式属性。

var vm = new Vue({
 data: {
  userProfile: {
   name: 'Anika'
  }
 }
})

你可以添加一个新age属性嵌套的userProfile对象：

Vue.set(vm.userProfile, 'age', 27)

还可以使用vm.$set实例方法，它只是全局Vu.set的别名：

vm.$set(vm.userProfile, 'age', 27)

有事可能需要为已有对象赋予多个新属性，所以，如果你想添加新的响应式属性：

vm.userProfile = Object.assign({}, vm.userProfile, {
 age: 27,
 favoriteColor: 'vue green'
})

显示过滤/排序结果

有时我们想要显示一个数组的过滤或者排序副本，而不是实际改变原始值，我们可以创建返回过滤或排序数组的计算属性：

<li v-for="n in evenNubers">{{ n }}</li>

data: {
 number: [1,2,3,4,5]
},
computed: {
 evenNubers:function() {
  return this.number.reverse()
 }
}

在计算属性不适用的情况下，可以使用method方法。

一段取值范围的v-for

v-for也可以取整数。在这种情况下，它将重复多次模板。

<div>
 <span v-for="n in 10">{{ n }}</span>
</div>

v-for on a <template>

类似于v-if，你也可以利用带有v-for的<template>渲染多个元素。比如：

<ul>
 <template v-for="item in items">
  <li>{{ item.msg }}</li>
  <li class="divider" role="presentation"></li>
 </template>
</ul>

v-for with v-if

当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当你想仅有的一些项渲染节点时，这种优先级的机制会十分有用：

<li v-for="todo in todos" v-if="!todo.isComplete">
 {{ todo }}
</li>

一个组件的v-for

在自定义组件里，你可以像任何普通元素一样用v-for:

<my-component v-for="item in items" :key="item.id"></my-component>
在2.2.0+版本里面。当组件中使用v-for时，key现在是必须的。

然而，任何数据都不会自动传递到组件中，因为组件有自己的独立作用域，为了把迭代数据传递到组件里，我们要用props：

<my-component
 v-for="(item, index) in items"
 :item="item"
 :index="index"
 ：key="item.id"
></my-component>

不自动将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>07vue列表渲染</title>
 <script src="./vue.js"></script>
 <script>
  window.onload = function(){
   var vm = new Vue({
    el:'.box',
    data:{
     dataList:['a','b','c','d','e','f'],
     newObj:{
      "name":"lucy",
      "age":18
     },
     objDataList:[
     {
      "name":"genery",
      "age":18
     },
     {
      "name":"bulse",
      "age":20
     },
     {
      "name":"naev",
      "age":23
     }
 
     ]
    }
   })
 
  }
 </script>
</head>
<body>
 <div class="box">
  <ul>
 
  <!-- v-for 列表数据 -->
  <li v-for="(item,index) in dataList">{{index}}---{{item}}</li>
  <li v-for="item in dataList">{{item}}</li>
 
  <!-- 对象 -->
  <li v-for="(value,key) in newObj">{{key}}-------{{value}}</li>
  <li v-for="value in newObj">{{value}}</li>
  <!-- 字典形式 -->
  <li v-for="datadict in objDataList">{{datadict}}</li>
  <li v-for="datadict in objDataList">{{datadict.name}}</li>
  <li v-for="datadict in objDataList">{{datadict.age}}</li>
  </ul>
  <div v-for="item in dataList">div: {{item}}</div>
 </div>
</body>
</html>

vue的列表渲染其实就是通过指令v-for可以将一组数据渲染到页面中,这一组数据可以是数组抑或是对象,v-for指令需要使用item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Vue列表渲染的示例代码

- Author -

fsrookie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
JavaScript浏览器选项卡效果
Aug 25 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 #Javascript
Vue表单输入绑定的示例代码
Nov 01 #Javascript
浅谈Angular 观察者模式理解
Nov 01 #Javascript
详解vuex状态管理模式
Nov 01 #Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 #Javascript
Vue.js 事件修饰符的使用教程
Nov 01 #Javascript
微信小程序实现蒙版弹窗效果
Nov 01 #Javascript
minio(1) OOP(1) celery(1) SeaTable(1) appdata(1) ACID(1) Outlook(1) Mysql8(2) Windows server 2003(1) 黑屏(2)
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
ucenter通信原理分析
2015/01/09 PHP
php 使用ActiveMQ发送消息，与处理消息操作示例
2020/02/23 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
js随机生成一个验证码
2017/06/01 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python Gitlab Api 使用方法
2019/08/28 Python
Python yield的用法实例分析
2020/03/06 Python
手把手教你从PyCharm安装到激活（最新激活码），亲测有效可激活至2089年
2020/11/25 Python
英国专业美容产品在线：Mylee（从指甲到脱毛）
2020/07/06 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
日语专业毕业生自荐信
2013/11/11 职场文书
《白鹅》教学反思
2014/04/13 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Redis 哨兵机制及配置实现
2022/03/25 Redis