首页
所有分类
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 相关文章推荐
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
javascript解析json实例详解
Nov 05 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
iView框架问题整理小结
Oct 16 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
JS求解两数之和算法详解
Apr 28 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
Xpath(1) Counter(1) most_common(1) MIME(1) 抖音(1) LOGO(1) 写入策略(1) binlog(2) redo log(1) 爬虫(2)
You might like
PHP循环结构实例讲解
2014/02/10 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
jQuery 操作XML入门
2008/12/25 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
js中document.write的那点事
2014/12/12 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
React学习笔记之事件处理（二）
2017/07/02 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
js中script的上下放置区别，Dom的增删改创建操作实例分析
2019/12/16 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
Python程序语言快速上手教程
2012/07/18 Python
python条件和循环的使用方法
2013/11/01 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
Vilebrequin欧洲官网：法国豪华泳装品牌（男士沙滩裤）
2018/04/14 全球购物
Nordgreen手表德国官方网站：丹麦极简主义手表
2019/10/31 全球购物
澳大利亚在线购买葡萄酒：The Wine Collective
2020/02/20 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
2014年教研员工作总结
2014/12/23 职场文书
五一晚会主持词
2015/07/01 职场文书
生活委员竞选稿
2015/11/21 职场文书