value是遍历得到的属性值,
key是遍历得到的属性名,
index是遍历次序,
这里的 key l index都是可选参数,如果不需要,这个指令其实可以写成v-for="value in me"
数组中index和key一样
在vue的项目中经常会用到的数组遍历,数组遍历的时候我们需要用到vue中的v-for,写法是v-for="自定义一个名字(这个名字可以任意) in 你要循环的数组(这个名字必须是你的数组的名字)" .<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>list</title>
</head>
<body>
<ul id="list">
<li v-for="item in items">
{{ item.message }}
</li>
<br>
<li v-for="(item,index) in items">
{{index}}:{{ item.message }}
</li>
<br>
<template v-for="item in items">
<li>{{ item.message }}</li>
<li>--------------</li>
</template>
<br>
<li v-for="value in object">
{{ value }}
</li>
<br>
<li v-for="(value,key) in object">
{{key}}:{{ value }}
</li>
<br>
<li v-for="n in 10">{{ n }}</li>
<br>
<li v-for="n in numbers">{{ n }}</li>
</ul>
<!--of 替代 in-->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#list",
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
],
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
},
numbers: [ 1, 2, 3, 4, 5 ]
},
computed:{
list:function(){
this.items.push({ message: 'Baz' })
},
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
</script>
</body>
</html>