vue根据路由ID获取数据,设置html数据

1、在右路中跳转设置参数

 <router-link :to="{path: 'PhoneParticular', query: { id: phone.id  }}">
 		<img :src="phone.image[0].image1"/>
 </router-link>`

2、引入全部数据,在被跳转到的vue页面,获取路由地址id。

		 import phonedata from '../lib/shoppingPhoneData'
   		 data (){
    			return{
    				phonedata,
    				id : this.$route.query.id,
    				item:[]
    			}
    		},

3、在全部数据(phonedata)中找到与id对应的数据,页面一加载就执行mounted()函数

	  mounted(){
			for(var i=0;i<phonedata.length;i++){
				if(phonedata[i].id==this.id){
					this.item=phonedata[i]				
				}
			}
		}

4、在html中使用对应的数据

					 <div class="price-main">
    						<div class="fontMin floatL price-title">价格</div>
    						<div class="floatL price-count">
    							<span>¥</span>{{item.price}}
    						</div>
    					</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值