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 相关文章推荐
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
python实现登录与注册系统
2020/11/30 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
销售主管的自我评价分享
2014/01/03 职场文书
药剂专业自荐书
2014/06/20 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
学生检讨书范文
2014/10/30 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记