vue渲染静态数据

最新推荐文章于 2024-03-06 13:41:50 发布

小风和月

最新推荐文章于 2024-03-06 13:41:50 发布

阅读量624

点赞数 1

分类专栏： web前端文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_45330738/article/details/120865376

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<style type="text/css">
		.box {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.content {
			flex: 1;
			background-color: lightblue;
			height: auto;
			margin: 1px;
			
			width: 30%;

		}
	</style>
	<body>
		<div id="app">
			<button type="button" @click="tap()">点我</button>
			<div class="box">
				<div  v-for="item in list.result.plantList" class="content">
					ID:{{item.plantID}}
					<p>{{item.name}}</p>
					<p>{{item.area}}</p>
					<p>{{item.engName}}</p>
					<span><a :href="item.coverURL">查看大图</a></span>
					<img :src="item.coverURL">
				</div>
			</div>

		</div>
	</body>
	<!-- <script>
		let btn1 = document.querySelector("#btn");

		console.log(btn1);
		btn1.addEventListener("click",function(){
			alert('123');
		} )
	</script> -->
	<script type="text/javascript">
		let vm = new Vue({
			el: "#app",
			data() {
				return {
					list: {
						"statusCode": "000000",
						"desc": "请求成功",
						"result": {
							"plantList": [{
								"area": "西南、华南。原产美洲的沙漠地带",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick37971445246358.jpg",
								"engName": "Agave americanavar. Marginata",
								"name": "金边龙舌兰",
								"plantID": 1
							}, {
								"area": "原产阿根延和巴西，中国哈尔滨、北京、南京等市有引种栽培",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick84711440409959.jpg",
								"engName": "Nicotiana",
								"name": "花烟草",
								"plantID": 2
							}, {
								"area": "原产墨西哥",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick14741443603797.jpg",
								"engName": "Echeveria pulvinata",
								"name": "锦晃星",
								"plantID": 3
							}, {
								"area": "热带和亚热带地区",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick50981443604909.jpg",
								"engName": "Rieger begonias",
								"name": "丽格海棠",
								"plantID": 4
							}, {
								"area": "",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick97441452591977.jpg",
								"engName": "Renanthera coccinea Lour.",
								"name": "火焰兰",
								"plantID": 5
							}, {
								"area": "中海，广西南宁",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick22501428056022.jpg",
								"engName": "Snapdragon, Dragon",
								"name": "金鱼草",
								"plantID": 6
							}, {
								"area": "世界多地",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick56501443173854.jpg",
								"engName": "Sedum pachyphyllum",
								"name": "乙女心",
								"plantID": 7
							}, {
								"area": "",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick60501441704980.jpg",
								"engName": "Adiantum Capillus－veneris L.",
								"name": "铁线蕨",
								"plantID": 8
							}, {
								"area": "重庆、浙江、四川、江西及山东；日本、朝鲜半岛",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick96241428056732.jpg",
								"engName": "Camellia japonica L.",
								"name": "山茶花",
								"plantID": 9
							}, {
								"area": "世界各地",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick71761448529487.jpg",
								"engName": "Aeonium tabuliforme f.cristata",
								"name": "莲花掌",
								"plantID": 10
							}, {
								"area": "",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick16691452503343.png",
								"engName": "",
								"name": "高砂之翁",
								"plantID": 11
							}, {
								"area": "",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick30351440581995.jpg",
								"engName": "Lonicera japonica Thunb.",
								"name": "金银花",
								"plantID": 12
							}, {
								"area": "原生地位于西亚与北非的干旱地区",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick81601442222732.jpg",
								"engName": "Sedum anglicum",
								"name": "姬星美人",
								"plantID": 13
							}, {
								"area": "",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick86871448358077.jpg",
								"engName": "Yellow allamanda",
								"name": "黄蝉",
								"plantID": 14
							}, {
								"area": "大部分地区",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick14601451898319.jpg",
								"engName": "Haworthia，cymbiformis，fvariegata",
								"name": "凝脂菊",
								"plantID": 15
							}, {
								"area": "",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick8011439286458.jpg",
								"engName": "Common camellia",
								"name": "山茶花",
								"plantID": 16
							}, {
								"area": "",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick67861439544559.jpg",
								"engName": "Euphorbia milii Ch. des Moulins",
								"name": "虎刺梅",
								"plantID": 17
							}, {
								"area": "原产欧洲南部",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick64291438766891.jpg",
								"engName": "Matthiola incana",
								"name": "紫罗兰",
								"plantID": 18
							}, {
								"area": "",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick90521453109126.jpg",
								"engName": "Enkianthus serrulatus （Wils.） Schneid.",
								"name": "齿缘吊钟花",
								"plantID": 19
							}, {
								"area": "杂交品种，自然界无分布",
								"coverURL": "http://img.boqiicdn.com/Data/BK/P/imagick37611444468476.jpg",
								"engName": "Pachyveria pachytoides",
								"name": "冬美人",
								"plantID": 20
							}],
							"totalCount": 608
						}
					}
				}
			},
			methods: {
				tap() {
					console.log(this.list.result.plantList);
				},
			},

		})
	</script>
</html>

小风和月

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue渲染静态数据

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <style type="text/css"> .box { wi.
复制链接

扫一扫