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是数组元素迭代的别名。

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

Javascript 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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
You might like
php 传值赋值与引用赋值的区别
2010/12/29 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
js验证表单第二部分
2006/11/25 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
vue实现通讯录功能
2018/07/14 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
Python中单例模式总结
2018/02/20 Python
Python autoescape标签用法解析
2020/01/17 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
总监职责范文
2013/11/09 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
村党支部书记承诺书
2014/05/29 职场文书
2014年学前班工作总结
2014/12/08 职场文书
护理工作个人总结
2015/03/03 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
2016年母亲节寄语
2015/12/04 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python