v-for遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in name">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in name">{{index+1}}---{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:['name01','name02','name03','name04'],
}
})
</script>
</body>
</html>
v-for遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>{{user.name}}</li>
<li>{{user.age}}</li>
<li>{{user.size}}</li>
</ul>
<ul>
<li v-for="item in user">{{item}}</li>
</ul>
<ul>
<li v-for="(value,key) in user">{{key}}--{{value}}</li>
</ul>
<ul>
<li v-for="(value,key,index) in user">{{key}}--{{value}}--{{index+1}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
user:{
name:'myName',
age:20,
size:12
}
}
})
</script>
</body>
</html>
v-for 使用过程添加key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in name" :key="item">{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:['name01','name02','name03','name04'],
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
