首页
所有分类
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 相关文章推荐
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
微信小程序视图容器（swiper）组件创建轮播图
Jun 19 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
Nuxt的路由动画效果案例
Nov 06 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
德生G88(1) 天梯图(1) ICF-F10(1) CPU(2) 德生1994(1) ICF-SW100(1) AE3805(1) 纸巾盒(1) PR-D3L(1) SLi Minor 2020(63)
You might like
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
require.js的用法详解
2015/10/20 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
违纪检讨书2000字
2014/02/08 职场文书
大班幼儿评语大全
2014/04/30 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
人事局接收函
2015/01/31 职场文书
教师个人总结范文
2015/02/11 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
一文搞懂Python Sklearn库使用
2021/08/23 Python
浅谈克隆 JavaScript
2021/11/02 Javascript