vue实现动态详情页面

像上述的详情页面，可能每个字段都会在页面写死，这样会影响页面结构，代码可读性较差，可维护性也不好，冗余的结构和样式代码也会大大增加。

因此这些详情页面，应该通过动态遍历来实现：

父组件
<template><div class="dynamic-detail"><div class="content-container"><common-detailv-for=" (item, idx) in testArr ":key="idx":item-data="item"></common-detail></div></div>
</template><script>
import CommonDetail from '@/components/DetailItem'
export default {name: 'DynamicDetail',components: {CommonDetail},data () {return {testObj: {id: 778899,permission: 'hmk'},testArr: [{label: '口号',value: '今天不努力，明天拧螺丝',name: '口号'},{label: '公司',value: 'XXXX',name: '公司',style: { color: 'skyblue' },clickFn: () => {console.log(this.testObj.id)}},{label: '每天一个小技巧',value: '多学多看多总结',name: '每天一个小技巧',formatFn: () => {if (this.testObj.permission) {return '多学多看多总结'} else {return '没权限'}}},{label: '时间',value: '2021-11-23',name: '时间',formatFn () {if (this.value) {console.log(this.value)return new Date(this.value)}}},]}}
}
</script><style scoped lang="less">
.dynamic-detail {position: relative;background-color: #f1f1f1;height: 100vh;overflow: hidden;.content-container {margin: 8px;border-radius: 8px;padding: 12px 16px;background-color: #fff;}
}
</style>

子组件
<template><div class="detail-item"><div class="label">{{ itemData.label }}</div><divclass="content":style="itemData.style"@click.stop="itemData.clickFn && itemData.clickFn()">{{ itemData.formatFn ? itemData.formatFn() : itemData.value }}</div></div>
</template><script>
export default {name: 'CommonDetail',props: {itemData: {type: Object,default: {}}},methods: {formatFn (itemData) {}}
}
</script><style scoped lang="less">
.detail-item {margin-bottom: 12px;.label {color: #999999;font-size: 14px;line-height: 20px;}.content {margin-top: 4px;font-size: 14px;line-height: 20px;color: #333333;}
}
</style>

vue实现动态详情页面相关推荐

前端Vue项目——课程详情页面实现
一.详情页面路由跳转应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件修改 src/components/Course/Co ...
Vue—keepAlive 动态管理页面缓存
简介 <keep-alive>是Vue的内置组件,当他包裹组件时,会对组件进行缓存,不去销毁组件. 首次进入页面时,会触发mounted和activated钩子,当页面被缓存下来后,进入页 ...
Vue前端购物详情页面
提示:Vue属于前端框架前言提示:这里可以添加本文要记录的大概内容: .Vue.js是用于构建交互式的 Web 界面的库. 2.它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单.灵活的A ...
Vue中动态设置页面title
前言更多内容,请访问我的个人博客. 安装依赖 npm install vue-wechat-title --save 复制代码在mian.js中引入 //设置title import VueWe ...
vue uniapp 动态设置页面背景图
在uniapp中的背景图需要动态变换一般结合后台返回数据渲染很简单但是每次都记不住自己写写加深印象这里是简单的html 代码 <view class="loginBg&quo ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
基于Vue+SpringCloudAlibaba微服务电商项目实战-商品服务-015：亿万级别商品详情页面实现动态优化
015:亿万级别商品详情页面实现动态优化 1 亿万级别商品详情页面如何设计 2 使用Nginx缓存商品详情页面 3 使用FreeMarker生成静态化模板页面 4 openresty+lua实现亿级别 ...
11.12-15.书籍详情页面的静态实现和动态数据绑定(有重要知识)
Chapter:11.前端页面开发 11.12-15.书籍详情页面的静态实现和动态数据绑定(有重要知识) 展示层代码太长了,为了避免影响阅读体验放后面了,主要就是 html 结构,css 样式, ...
2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式
1.带着id传到详情页面中效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId http://localhost:8081/#/Detail/6112 http:// ...

vue实现动态详情页面

vue实现动态详情页面相关推荐

最新文章

热门文章