vue.js循环for(列表渲染)详解
一、总结
一句话总结:
v-for
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
var example1 = new Vue({el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
1、vue.js中的循环结构(列表渲染:for)如何使用?
v-for
用于循环的数组里面的值可以是对象,也可以是普通元素
v-for
可以使用v-for
指令基于一个数组渲染一个列表。这个指令使用特殊的语法,形式为item in items
,items
是数据数组,item
是当前数组元素的别名:
示例:
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
var example1 = new Vue({el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
结果:
{% raw %}
{{item.message}}
{% endraw %}
详细示例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-for</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 <script type="text/javascript" src="js/vue.js"></script> 8 <script type="text/javascript"> 9 window.onload = function() {10var dataList = {11 innerText: [ '大家好', '欢迎来到麦子学院!' ]12};13new Vue({14 el: 'div',15 data: dataList16});17 };18 </script>19 </head>20 <body>21 <div class="head face">22<span v-for="text in innerText">{{ text }}</span>23 </div>24 </body>25 </html>
2、vue.js中的循环结构(列表渲染:for)对普通的for循环的增强有哪些?
$index
在v-for
块内我们能完全访问父组件作用域内的属性,另有一个特殊变量$index
,正如你猜到的,它是当前数组元素的索引:
<ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li> </ul>
var example2 = new Vue({el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
结果:
{% raw%}
{{ parentMessage }} - {{ $index }} - {{ item.message }}
{% endraw %}
另外,你可以为索引指定一个别名(如果v-for
用于一个对象,则可以为对象的键指定一个别名):
<div v-for="(index, item) in items"> {{ index }} {{ item.message }} </div>
3、vue.js中想用循环结构,但是不想给循环出来的东西添加标签,如何操作?
template v-for
类似于 templatev-if
,也可以将v-for
用在<template>
标签上,以渲染一个包含多个元素的块。例如:
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul>
4、vue.js的循环中,如何动态改变数据源数组里面的内容?
数组变动检测 变异方法
Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打开浏览器的控制台,用这些方法修改上例的items
数组。例如:example1.items.push({ message: 'Baz' })
。
5、vue.js的列表渲染中,修改数据源数组的方法和不修改数据源数组的方法分别有哪些?
变异方法 替换数组
变异方法
Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打开浏览器的控制台,用这些方法修改上例的items
数组。例如:example1.items.push({ message: 'Baz' })
。
替换数组
变异方法,如名字所示,修改了原始数组。相比之下,也有非变异方法,如filter()
,concat()
和slice()
,不会修改原始数组而是返回一个新数组。在使用非变异方法时,可以直接用新数组替换旧数组:
example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })
可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法,以最大化复用 DOM 元素,因而用另一个数组替换数组是一个非常高效的操作。
6、vue.js的列表渲染中,遍历对象和遍历数组有什么区别?
$key
也可以使用v-for
遍历对象。除了$index
之外,作用域内还可以访问另外一个特殊变量$key
。
<ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ $key }} : {{ value }} </li> </ul>
new Vue({el: '#repeat-object',data: {object: {FirstName: 'John', LastName: 'Doe', Age: 30 } } })
结果:
{% raw %}
{{ $key }} : {{ value }}
{% endraw %}
也可以给对象的键提供一个别名:
<div v-for="(key, val) in object"> {{ key }} {{ val }} </div>
在遍历对象时,是按 `Object.keys()` 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
7、vue.js的列表循环中如何循环打印整数(比如1-100)(比如将某内容重复多少遍)?
值域 v-for
v-for
也可以接收一个整数,此时它将重复模板数次。
<div> <span v-for="n in 10">{{ n }} </span> </div>
结果:
{% raw %}
{{ n }}
{% endraw %}
二、内容在总结中
参考:vue 列表渲染_w3cschool
/aekdgs/mjag7dn1.html
如需更加详细,参考vue的手册即可