vue笔记-v-for
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue3.js"></script>
</head>
<body>
<!-- v-for -->
<div id="app">
<ul>
<!-- item 每一项；index 下标； books data里的数据列表 -->
<!-- 注意：item；index 顺序不能颠倒 -->
<li v-for="(item, index) in books" :key="index">{{index}}---{{item}}</li>
</ul>
<!-- 复杂数据循环 -->
<h2>水果摊</h2>
<div v-for="(item, index) in fruits" :key="index">
<h3>种类：{{item.name}}</h3>
<span>价格：{{item.price}}</span>
<p>秒{{item.des}}</p>
</div>
<ul>
<!-- 遍历对象 -->
<!-- 第一个值是value -->
<!-- 第二个值是key -->
<!-- 第三个值是索引号 -->
<li v-for="(value, key,index) in info" :key="index">{{value}}=={{key}}=={{index}}</li>
</ul>
<ul>
<!-- 遍历字符串 -->
<li v-for="(item, index) in message" :key="index">{{item}}</li>
</ul>
<ul>
<!-- 遍历数字 从1开始-->
<li v-for="(item, index) in 10" :key="index">{{item}}</li>
</ul>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message:"hello world",
books:[
"西游记",
"三国演义",
"水浒传",
],
fruits:[
{id:1,name:"苹果",price:20,des:"8.8一箱"},
{id:2,name:"苹果",price:20,des:"8.8一箱"},
{id:3,name:"苹果",price:20,des:"8.8一箱"},
{id:4,name:"苹果",price:20,des:"8.8一箱"},
],
info:{
name:"za",
age:12,
join:"上海"
}
}
},
methods: {
}
}).mount("#app")
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
