前端学习笔记-8.15学习饿了么的seller收藏,商家信息

seller.vue组件的剩余部分。
商家信息和收藏功能。

商家信息:
dome
在这里插入图片描述
css:info-item的class里加入border-1px,下边线就一样了
在这里插入图片描述
收藏功能:
1.收藏对应两种样式,用active的css显示
收藏未收藏用favoriteText显示
在这里插入图片描述
css
在这里插入图片描述
先给data写个默认值
data() {
return {
favorite: false
}
},
favoriteText可以用computed(计算属行)来观测,favoriteText文案依赖favorite变量的,用计算属性来观测
在这里插入图片描述
2.我们来给favorite加个点击事件,@click=“toggleFavorite”
在methods中定义toggleFavorite
因为是在better-scroll中,我们要判断,
在这里插入图片描述
3.but刷新以后又初始了,存到本地,下边完成
每个商家都有个id,我们回到app.vue中,一开始seller是有个id的,id是从url参数里边拿的,
我们需要写一个立即执行的函数:urlParse()
通过一个方法拿到queryParam,拿到queryParam以后,再去拿他的id
在这里插入图片描述
4.定义方法util.js,实现从url中拿到id
多个的话:
192.168.43.143:8080/?id=12345&a=b#|/ratings,
用window.location.search拿到字符串,"?id=12345&a=b"解析一下即可
期望的输出:@return Object {id:12345,a:b}
在这里插入图片描述
在APP.vue中引入
改下接口
在这里插入图片描述
assign({},this.seller,res.data)
返回三个参数,第一个是最终返回的数据用空的{},第二个key,第三个value
用assign方法,可以为obj添加属性,为id赋值否则会被丢弃。

相当于用extend方法扩展了seller,把结果赋值给object,返回给this.seller
相当于在id的基础上,给seller添加其他的属性,这样就不会直接把id干掉,给对象添加属性的方法
5.定义saveToLocal函数,引入。和urlParse()一样,新建js文件,这里叫store.js
在这里插入图片描述
在这里插入图片描述
6.返回seller.vue。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值