抓周清单

可以准备的东西有:
 
一:算盘(也可用秤,计算机都行)

解说:此子逻辑性强,具数学天份,性格偏向理科,可从事科学研究,或成为工程师。

 
 
二:(应以文科为道具,一本即可)

解说:万般皆下品,唯有读高,所以此子应循正路科名以成材而且性格偏向文科,长大后会投身教育界或做学术研究。

 
三:钱币(最好采用古钱,通行的钞票及辅币则未免太俗气。)

解说:此子擅于理财,可从事金融,投资或会计,但最大机会还是自资营商。

 
四:毞墨(以毛毞 ,钢毞 ,画毞 墨砚道具均可)

解说:此子可望用毞谋生,但与抓着的情况不同,他/她更倾向于做作家做记者。推而广知,如绘画,设计等行业均可。

 
五:印章 印章,印台均可)

解说:能掌印即能掌权,此子是管理方面的人才,可投考公务员或大型机构方面循序渐进的升官运特佳。

 
六:肉类(以保鲜纸将肉块包好即可)

解说:此子倾向于物欲较强,但未必是坏事,从事饮食业,或满足视听之娱的服务性行业,一样可有成就。

 
七:刀剑(当然采用假刀假剑,免生危险)

解说:此子身体健康强壮,可从事武职或纪律部队,虽说今日社会重文轻武,但难保不会成为杰出的运动员。

 
八:田土(用保鲜纸包好一撮泥土即可)

解说:古代代表务农,虽然现在基本无务业可言,便环保事业,园艺,医药,仍是与泥土息息相关。

 
九:芹菜(一根芹菜就行)

解说:先有心理准备,与抓得()相反,此子难言有惊人的口才,唯靠一个勤字,但平平实实自有好感,事业上多数稳稳阵阵,免却风风雨雨,宜从事规律化,按部就班及需要耐性的工作。

 
十:尺子(最好用木尺或铁而不用胶尺,上述两种物料较具灵气)

解说:尺有多重意思,裁缝用上尺,从事测量建筑也用上尺,两者相差甚远,要仔细观察小孩日后志趣,才能定论。

 
11:
(一颗即可)

解说:莫说得个吉,寓意也相当不错。此子福泽深厚,事业上谈不上有惊人成就,但天生贵格不用太过奔波劳碌,或因继承了祖德,或因本身谦冲淡泊,总之不爱竟争,自得其乐。

 
12:
(使用一颗生或大即可)

解说:此子天性聪明,宜从事讲求创意,口才的行业,切忌刻板和公式化。即是说,念法律便要做大状而不是做事务律师,念商科便要做sales而不是只呆在办公室处理文件。

 
准备几样即可,将东西一字排开,以宝宝第一件抓住不放的东西为准。  

 

"recommend":[ { "id": 1, "cover": "http://p1.music.126.net/FoF5_ROj-jU37263LhInsw==/109951163203287436.jpg?param=140y140", "playCount": "3655万", "desc": "听首老歌 回味永不褪色的华语经典" }, { "id": 2, "cover": "http://p1.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140", "playCount": "3032万", "desc": "助眠辑 | 自然音,伴灵动乐符萦绕耳畔" }, { "id": 3, "cover": "http://p1.music.126.net/QcPJfzds8ejF1FPgBaXMTw==/109951163128461676.jpg?param=140y140", "playCount": "3406万", "desc": "古典清香 I 我的茶馆里住着巴赫与肖邦" }, { "id": 4, "cover": "http://p2.music.126.net/08wpPWN0a3rOZ6nOo-Mh2g==/109951171292437751.jpg?param=140y140", "playCount": "267", "desc": " 投资笔记23:海外火热的“稳定币”,到底是个什么?" }, { "id": 5, "cover": "http://p1.music.126.net/aao5Ku06P5PrMafCfT3MjQ==/18648816720698170.jpg?param=140y140", "playCount": "2452万", "desc": "「日语民谣」月色中的浅吟低唱" }, { "id": 6, "cover": "http://p2.music.126.net/-BFe-lnr1V-eRFWK56Hnuw==/109951170707847109.jpg?param=140y140", "playCount": "49万", "desc": "001 抓周" }, { "id": 7, "cover": "http://p1.music.126.net/WFvZtVo1_k6neT0641tKnQ==/109951171302151714.jpg?param=140y140", "playCount": "4597万", "desc": "用户105667433的歌单" }, { "id": 8, "cover": "http://p2.music.126.net/9pDGk6ip65gdoIZETi1Kgw==/109951170473059608.jpg?param=140y140", "playCount": "1503万", "desc": "用户105667433的歌单" } ],怎么样修改数据代码,实现点击改变内容效果<script setup> import { ref, onMounted, watch } from 'vue'; const tags = ref(['华语', '流行', '摇滚', '民谣', '电子']); const currentTag = ref('华语'); const recommendList = ref([]); const loading = ref(true); const error = ref(null); const itemsPerPage = ref(8); // 两行,每行4个 const itemWidth = ref(160); const defaultCover = 'https://picsum.photos/160/160?random=error'; // 获取推荐列表 const fetchRecommendList = async (tag = '华语') => { loading.value = true; error.value = null; try { const res = await fetch(`http://localhost:3000/recommend?tag=${tag}`); const responseData = await res.json(); let parsedItems = []; if (Array.isArray(responseData)) { parsedItems = responseData; } else if (responseData && Array.isArray(responseData.data)) { parsedItems = responseData.data; } else { console.log('API原始响应:', responseData); throw new Error('无法识别的推荐数据格式'); } const validItems = parsedItems.filter(item => item.cover && item.desc && item.playCount ); if (validItems.length === 0) { throw new Error('API返回空数据或缺少必要字段'); } recommendList.value = validItems; } catch (err) { console.error('请求失败:', err); error.value = err.message || '加载推荐内容失败'; } finally { loading.value = false; } }; const handleTagClick = (tag) => { currentTag.value = tag; fetchRecommendList(tag); }; const handlePlay = (item) => { console.log('播放推荐内容:', item); }; const handleImageError = (item) => { item.cover = defaultCover; }; // 菜单交互 const toggleMenu = () => { showMenu.value = !showMenu.value; }; onMounted(() => { fetchRecommendList(currentTag.value); }); watch(recommendList, (newList) => { console.log('推荐列表已更新,共', newList.length, '条数据'); }); </script>
06-21
要实现点击标签后改变内容的效果,可以通过修改 `fetchRecommendList` 方法以及调整数据结构来完成。以下是完整的解决方案: ### 修改后的代码 ```vue <script setup> import { ref, onMounted } from 'vue'; // 数据初始化 const tags = ref(['华语', '流行', '摇滚', '民谣', '电子']); const currentTag = ref('华语'); const recommendList = ref([]); const loading = ref(true); const error = ref(null); // 模拟的推荐数据 const mockData = { 华语: [ { id: 1, cover: "http://p1.music.126.net/FoF5_ROj-jU37263LhInsw==/109951163203287436.jpg?param=140y140", playCount: "3655万", desc: "听首老歌 回味永不褪色的华语经典" }, { id: 2, cover: "http://p1.music.126.net/sixunTcvD_IXeVqxZnpHkA==/109951163452086313.jpg?param=140y140", playCount: "3032万", desc: "助眠辑 | 自然音,伴灵动乐符萦绕耳畔" } ], 流行: [ { id: 3, cover: "http://p1.music.126.net/QcPJfzds8ejF1FPgBaXMTw==/109951163128461676.jpg?param=140y140", playCount: "3406万", desc: "古典清香 I 我的茶馆里住着巴赫与肖邦" }, { id: 4, cover: "http://p2.music.126.net/08wpPWN0a3rOZ6nOo-Mh2g==/109951171292437751.jpg?param=140y140", playCount: "267", desc: "投资笔记23:海外火热的“稳定币”,到底是个什么?" } ], 摇滚: [ { id: 5, cover: "http://p1.music.126.net/aao5Ku06P5PrMafCfT3MjQ==/18648816720698170.jpg?param=140y140", playCount: "2452万", desc: "「日语民谣」月色中的浅吟低唱" }, { id: 6, cover: "http://p2.music.126.net/-BFe-lnr1V-eRFWK56Hnuw==/109951170707847109.jpg?param=140y140", playCount: "49万", desc: "001 抓周" } ], 民谣: [ { id: 7, cover: "http://p1.music.126.net/WFvZtVo1_k6neT0641tKnQ==/109951171302151714.jpg?param=140y140", playCount: "4597万", desc: "用户105667433的歌单" }, { id: 8, cover: "http://p2.music.126.net/9pDGk6ip65gdoIZETi1Kgw==/109951170473059608.jpg?param=140y140", playCount: "1503万", desc: "用户105667433的歌单" } ], 电子: [] }; // 获取推荐列表 const fetchRecommendList = (tag) => { loading.value = true; error.value = null; try { const data = mockData[tag] || []; if (data.length === 0) { throw new Error('该分类下暂无推荐内容'); } recommendList.value = data; } catch (err) { console.error('加载失败:', err); error.value = err.message; } finally { loading.value = false; } }; // 处理标签点击事件 const handleTagClick = (tag) => { if (currentTag.value !== tag) { currentTag.value = tag; fetchRecommendList(tag); // 根据新标签重新加载数据 } }; onMounted(() => { fetchRecommendList(currentTag.value); // 初始化加载默认标签的数据 }); </script> ``` --- ### 解释: 1. **模拟数据 `mockData`** 使用一个对象 `mockData` 来存储不同标签对应的数据。每个标签(如 `'华语'`, `'流行'` 等)都有一个数组作为其值,包含对应的推荐内容。 2. **`fetchRecommendList` 方法** 根据传入的 `tag` 参数,从 `mockData` 中获取对应的数据。如果数据为空,则抛出错误提示;否则更新 `recommendList` 并渲染到页面上。 3. **`handleTagClick` 方法** 当用户点击某个标签时,会触发该方法。如果点击的标签与当前标签不同,则更新 `currentTag` 并调用 `fetchRecommendList` 方法重新加载数据。 4. **初始化加载** 在组件挂载时,默认加载 `currentTag`(初始值为 `'华语'`)对应的内容。 5. **防抖处理** 如果用户快速点击同一个标签,不会重复触发数据加载操作,避免不必要的性能浪费。 --- ### 效果: - 初始加载时显示 `'华语'` 标签的内容。 - 用户点击其他标签时,动态切换并显示对应的内容。 - 如果某个标签没有推荐内容,则显示错误提示。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值