首页 > 网络编程 > JavaScript > 正文

Vue列表渲染的示例代码_vue.js

2018-11-10 10:00:59

用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.setVue.set(vm.items, i, newVal)//Array.prototype.splicevm.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 监听列表item渲染事件方法
  • 深入理解Vue 的条件渲染和列表渲染
  • Vue列表页渲染优化详解
  • Vue.js列表渲染绑定jQuery插件的正确姿势
  • 详解vuejs之v-for列表渲染
  • Vue.js学习教程之列表渲染详解
  • Vue.JS入门教程之列表渲染
  • Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
  • VUEJS实战之构建基础并渲染出列表(1)
  • 相关标签:JavaScript
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 微信支付勒索病毒制造者被锁定 网友:史上最蠢的黑客!
  • 英国电信宣布从核心设备中删除华为产品 5G不采用
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程