每天记录一个小功能
html页面
<template>
<view>
<view>程序员</view>
<view v-for="(item,index) in list.programmers">
<view class="mytext">
<text>姓:{{item.firstName}}</text><text>名字:{{item.lastName}}</text>
<text>邮箱:{{item.email}}</text>
</view>
</view>
<view>作者</view>
<view v-for="(item,index) in list.authors">
<view class="mytext">
<text>姓:{{item.firstName}}</text><text>名字:{{item.lastName}}</text>
<text>体裁:{{item.genre}}</text>
</view>
</view>
<view>音乐家</view>
<view v-for="(item,index) in list.musicians">
<view class="mytext">
<text>姓:{{item.firstName}}</text><text>名字:{{item.lastName}}</text>
<text>工具:{{item.instrument}}</text>
</view>
</view>
</view>
</template>
<script>
import testJsonData from "../../common/test.json"
console.log(testJsonData.programmers[0].email);
export default{
data(){
return {
list:testJsonData
}
}
}
</script>
<style>
.mytext text{
display: inline-block;
margin-left: 20px;
}
</style>
json数据页面
{ "programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
] }
效果展示: