【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
for.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="vue-app-for">
<h1>for 指令 直接引用</h1>
<!--直接引用-->
{{arrays[0]}}
{{arrays[1]}}
{{arrays[2]}}
{{arrays[3]}}
{{arrays[4]}}
<h1>for 指令 遍历数组</h1>
<ul>
<!-- for each 遍历数组-->
<li v-for="obj in arrays">
{{obj}}
</li>
</ul>
<ul>
<!-- for each 遍历数组-->
<li v-for="obj in arrays">
{{obj}}
</li>
</ul>
<ul>
<!-- for each 遍历数组 带下标-->
<li v-for="(obj,index) in arrays">
{{index}} {{obj}}
</li>
</ul>
<h1>for 指令 遍历对象数组</h1>
<ul>
<!-- for each 遍历数组-->
<li v-for="(obj,index) in users">
{{index}} {{obj.name}} {{obj.age}}
</li>
</ul>
<!--template 可以作为容器标签 不会渲染到dom中-->
<template v-for="(obj,index) in users">
<h3> {{index}} {{obj.name}}</h3>
<p>{{obj.age}}</p>
</template>
<h1>for 指令 遍历对象</h1>
<!--template 可以作为容器标签 不会渲染到dom中-->
<template v-for="(user,index) in users">
<div v-for="(val,key) in user">
<p>{{key}} -{{val}}</p>
</div>
</template>
</div>
</body>
<script src="for.js">
</script>
</html>for.js
new Vue({
el: '#vue-app-for',
data() {
return {
arrays: ['孙悟空', '猪八戒', '沙悟净', '白龙马', '唐三藏'],
users: [
{ name: '孙悟空', age: '500' },
{ name: '猪八戒', age: '400' },
{ name: '沙悟净', age: '300' },
{ name: '白龙马', age: '200' },
{ name: '唐三藏', age: '20' }
]
}
},
methods: {
},
computed: { //computerd里的方法都需要return值
}
});页面效果
来源：oschina
链接：https://my.oschina.net/u/3728166/blog/3145367