index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<h1>V-if 循环</h1>
<!--数组下标-->
<!--{{characters[0]}}-->
<!--{{characters[1]}}-->
<!--{{characters[2]}}-->
<!--数组遍历-->
<ul>
<li v-for="character in characters">
{{character}}
</li>
</ul>
<ul>
<!--拿到下标-->
<!--<li v-for="(user,index) in users">-->
<!--{{index}}-->
<li v-for="user in users">
{{user.name}}-{{user.age}}
</li>
</ul>
<!--遍历div-->
<!--优化的话就是吧div还成template 这样渲染出来就不是很多块了-->
<template v-for="(user,index) in users">
<h3>{{index}}.{{user.name}}</h3>
<p>Age-{{user.age}}</p>
</template>
<br>
<!--深层遍历，先拿到对象，然后在遍历对象里面的元素-->
<template v-for="(user,index) in users">
<div v-for="(val,key) in user">
<p>{{key}}-{{val}}</p>
</div>
</template>
<!--在最新的vue不设置key值会报错,一般就用index-->
<tbody v-for="(user,index) in users" :key="index">
</tbody>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
new Vue({
el:"#vue-app",
data:{
characters:["Mario","Luffy","Yoshi"],
users:[
{name:"Henry",age:30},
{name:"Bucky",age:25},
{name:"Emily",age:18}
]
},
methods:{
},
computed:{
}
});
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
