前言
本章主要介绍Vue中V-for指令的使用,V-for指令是VUE中的重要指令,将批量数据渲染至页面使用
提示:以下是本篇文章正文内容,下面案例可供参考
一、V-for基本作用?
在网页中我们都可以看到很多像下图一样的数据渲染,这些数据都是
从后台拿到,当我们将他们应用于前端时,不可能为每一条数据都创
建一个div,div中再嵌套img图片,电影名等。如果有成百上千条这
样的数据那我们的工作量将非常大,于是就有了v-for
二、使用步骤
1.V-for基本语法
代码如下(示例):
<div id = "app">
<ul>
<li v-for="item in items">
{{item.id}}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
items: [
{
"id": 1,
"title": "杀戮天眼",
},
{
"id": 2,
"title": "电话",
},
]
}
})
</script>
想要渲染到视图区的哪部分,就在该标签内使用V-for,这里我们的例子是将数据渲染至<li>
中
第一个值item
是我们的自定义命名
第二个值in
是必须要有的,用来链接你的自定义命名与数据名
第三个值items
为你想要渲染的数据名。
**{{item.id}}**使我们渲染的id至页面,语法为
{{item.你的自定义命名}}
,如果我们想要渲染数据中所有的title至页面只需要把.
后面的id换为title即可{{item.title}}
2.案例源码
<style>
* {
margin: 5px;
}
#app ul {
padding: 0px;
text-align: center;
}
#app ul li {
display: inline-block;
font-size: 8px;
}
img {
width: 180px;
height: 280px;
}
</style>
</head>
<script src="../js/vue.js"></script>
<body>
<div id="app">
<ul>
<li v-for="subject in subjects" :key="subject.id">
<img :src="subject.cover" alt=""><br />
电影名: {{subject.title}}<br />
评分: {{subject.rate}}<br />
<!-- 链接: {{subject.url}}<br /> -->
ID: {{subject.id}}<br />
</li></br>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
subjects: [
{
"rate": "5.7",
"cover_x": 527,
"title": "杀戮天眼",
"url": "https://movie.douban.com/subject/30304769/",
"playable": false,
"cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2561506095.webp",
"id": "30304769",
"cover_y": 800,
"is_new": true
},
{
"rate": "6.7",
"cover_x": 1434,
"title": "英勇废柴",
"url": "https://movie.douban.com/subject/34663688/",
"playable": false,
"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2563993939.webp",
"id": "34663688",
"cover_y": 2048,
"is_new": true
},
{
"rate": "6.0",
"cover_x": 1080,
"title": "秘密窝点",
"url": "https://movie.douban.com/subject/30206909/",
"playable": false,
"cover": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2617708810.webp",
"id": "30206909",
"cover_y": 1600,
"is_new": true
},
{
"rate": "5.9",
"cover_x": 1500,
"title": "野外圣诞节",
"url": "https://movie.douban.com/subject/33394375/",
"playable": false,
"cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2571587874.webp",
"id": "33394375",
"cover_y": 2222,
"is_new": true
},
{
"rate": "5.6",
"cover_x": 2003,
"title": "爆裂兄弟",
"url": "https://movie.douban.com/subject/27176614/",
"playable": false,
"cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2554603995.webp",
"id": "27176614",
"cover_y": 2968,
"is_new": true
},
{
"rate": "6.6",
"cover_x": 531,
"title": "领袖水准",
"url": "https://movie.douban.com/subject/27200012/",
"playable": false,
"cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2587577516.webp",
"id": "27200012",
"cover_y": 755,
"is_new": true
},
{
"rate": "7.8",
"cover_x": 1080,
"title": "血战摩苏尔",
"url": "https://movie.douban.com/subject/34679696/",
"playable": false,
"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2624892849.webp",
"id": "34679696",
"cover_y": 1513,
"is_new": true
},
{
"rate": "7.1",
"cover_x": 1013,
"title": "黑鸟",
"url": "https://movie.douban.com/subject/30277288/",
"playable": false,
"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2617780988.webp",
"id": "30277288",
"cover_y": 1500,
"is_new": true
},
{
"rate": "7.2",
"cover_x": 1280,
"title": "我想藏起来",
"url": "https://movie.douban.com/subject/30170195/",
"playable": false,
"cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2582179478.webp",
"id": "30170195",
"cover_y": 1920,
"is_new": true
},
{
"rate": "5.8",
"cover_x": 675,
"title": "绝命孤帆",
"url": "https://movie.douban.com/subject/30319942/",
"playable": false,
"cover": "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2539738483.webp",
"id": "30319942",
"cover_y": 1000,
"is_new": true
}
]
}
})
</script>
数据部分为豆瓣提供
总结
以上就是今天要讲的内容,希望可以帮到你,有问题评论感谢指出