建网站的费用,公众号如何推广,手机型号最全的网站,建设工程信息网官网重庆背景
在单个html文件里面使用vue3、jquery等其他第三方js库#xff0c;实现规定的页面效果#xff0c;其中主要功能是从商品json数据中读取数据#xff0c;然后可以通过搜索框、下拉框、左侧菜单来筛选商户信息。
页面布局 技术要点#xff1a;
1、通过路由来进行页面布…背景
在单个html文件里面使用vue3、jquery等其他第三方js库实现规定的页面效果其中主要功能是从商品json数据中读取数据然后可以通过搜索框、下拉框、左侧菜单来筛选商户信息。
页面布局 技术要点
1、通过路由来进行页面布局 div classtab-pane router-view namerouterView-1/router-viewdiv classcontent-wrapperrouter-view namerouterView-2/router-viewrouter-view namerouterView-3/router-viewrouter-view namerouterView-4/router-view/div/div// 创建路由const router createRouter({history: createWebHashHistory(),routes: [{path: /,components: {routerView-1: routerView-1,}},{path: /path2,components: {routerView-1: routerView-1,routerView-2: routerView-2,routerView-3: routerView-3,}},{path: /path3,components: {routerView-1: routerView-1,routerView-2: routerView-2,}},]});1在视图中通过路由组件名字来显示如果路由路径下没有传入对应的组件那么视图中就不会显示该路由视图。
2 在页面中可以有多个路由出口其中出口内容可以通用命名来指定其中如果传入对应的组件那么该路由视图出口就有内容否则就不会展示相当于没有内容。
3 其中路由创建、组件定义都是在 const app createApp(App);的App之外定义的然后app.userouter)就可以引用进来。
4在单个html页面中定义组件其中必须要引入vue组件代码模板是 const module {template: ,setup() {return { };}};其中如果需要用到vue中的App对象里面的内容那么就会使用到provide、injectprovide需要在App对象里面注入组件需要的数据inject是取出注入的数据。inject可以在不同的组件中使用。
2、布局CSS设置
现在实现一个效果就是在div里面展示商户地址和商户类型是左右布局展示其中类型在右边底部其中类型一定会显示出来而地址始终在类型的左边其中地址过长时会自动换行。 div classaddress-typediv classaddress/divdiv classtype/div
/divcss设置如下
.address-type {display: flex;align-items: center;justify-content: space-between;
}
.address {flex: 1;text-alin: left;
}
.type {flex-shrink: 0;text-align: right;align-self: flex-end;width: auto;
}
