工具：HBuilder X
圖片來自網路侵權私信洗掉
v-for 指令需要以 student in students形式的特殊語法， students是源資料陣列并且 student 是陣列元素迭代 (交換替代) 的別名
v-for 可以系結資料到陣列來渲染一個串列
今天學習for回圈，先上案例：
然后看一下原始碼：
<template>
<view>
<view class="demo">
<view class="demo2" v-for="student in students">
<!-- 頭像 -->
<view class="img-v">
<image class="img" :src="student.img"></image>
</view>
<!-- 資訊 -->
<view class="user">
<view>姓名:{{student.name}}</view>
<view>id:{{student.id}}</view>
<view>性別:{{student.sex}}</view>
<view>年齡:{{student.age}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
students:[{
img:'https://img2.baidu.com/it/u=895967582,2760717342&fm=26&fmt=auto',
name:"張三",
id:1,
sex:"male",
age:18
},{
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftx20%2F09041801136147.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638932347&t=928f444819f4e3c2c174f60990b7d47e',
name:"李四",
id:2,
sex:"male",
age:18
},{
img:'https://img1.baidu.com/it/u=1924720413,2026555247&fm=26&fmt=auto',
name:"王五",
id:3,
sex:"male",
age:18
},{
img:'https://img1.baidu.com/it/u=1236883555,3923456608&fm=26&fmt=auto',
name:"趙六",
id:4,
sex:"male",
age:18
},{
img:'https://img1.baidu.com/it/u=3443724077,4284733591&fm=26&fmt=auto',
name:"孫七",
id:5,
sex:"male",
age:18
}]
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.img{
width: 200rpx;
height: 200rpx;
border-radius: 25%;
}
.demo2{
display: flex;
/* justify-content: center; */
align-items: center;
}
.img-v{
margin-right: 50rpx;
margin-top: 20rpx;
margin-left: 20rpx;
/* background-color: #007AFF; */
}
.user{
background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 100rpx;
padding-right: 100rpx;
padding-top: 25rpx;
padding-bottom: 25rpx;
border-radius: 25rpx;
margin-top: 20rpx;
color: #FFFFFF;
font-weight: 1000;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/354653.html
標籤：其他