建设厅网站修改密码,网站建设询价单,网站制作网站制作公司,百度优选官网目录 介绍
准备
目标
规定
思路
解法参考 介绍
经常用手机购物的同学或许见过这种功能#xff0c;在浏览商品列表的时候#xff0c;我们通过点击一个小小的按钮图标#xff0c;就能快速将数据列表在大图#xff08;通常是两列#xff09;和列表两种布局间来回切换。…目录 介绍
准备
目标
规定
思路
解法参考 介绍
经常用手机购物的同学或许见过这种功能在浏览商品列表的时候我们通过点击一个小小的按钮图标就能快速将数据列表在大图通常是两列和列表两种布局间来回切换。
本题需要在已提供的基础项目中使用 Vue 2.x 知识实现切换商品列表布局的功能。
准备
开始答题前需要先打开本题的项目文件夹目录结构如下
├── effect.gif
├── goodsList.json
├── css
├── images
├── index.html
└── js├── axios.min.js└── vue.js其中
effect.gif 是最终实现的效果图。goodsList.json 是请求需要用到的数据。css 是样式文件夹。images 是图片文件夹。js/vue.js 是 Vue2.x 文件。js/axios.min.js 是 axios 文件。index.html 是页面布局及逻辑。
注意打开环境后发现缺少项目代码请手动键入下述命令进行下载
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/07.zip unzip 07.zip rm 07.zip使用 live server 插件启动项目并在浏览器中预览 index.html 页面显示如下 当前并未实现数据异步加载和点击右上方按钮切换布局的效果。
注意一定要通过 live server 插件启动项目避免项目无法访问影响做题。
目标
请在 index.html 文件中补全代码最终实现数据渲染及切换布局的效果。
具体需求如下
1.完成数据请求数据来源 goodsList.json请勿修改该文件中提供的数据。在项目目录下已经提供了 axios考生可自行选择是否使用。效果如下 2.点击“列表效果”的图标图标背景色变为红色即 classactive“大图效果”的图标背景色变为灰色即 classactive 被移除布局切换为列表效果。效果如下 3.点击“大图效果”的图标图标背景色变为红色即 classactive“列表效果”的图标背景色变为灰色即 classactive 被移除布局切换为大图效果。效果如下 规定
请严格按照考试步骤操作切勿修改考试默认提供项目中的文件名称、文件夹路径等。请勿修改项目中提供的 id、class、函数名等名称以免造成无法判题通过。请勿修改 goodsList.json 文件中提供的数据。先自己动手做一下吧传送门 思路
这道题目主要是考察axios的数据获取Vue的遍历等相关知识。axios的数据获取我们在很多的题目已经有见到过了vue的遍历使用的是v-for指令。点击大图和小图图标显示对应的内容我们可以使用v-if以及v-else来进行相应部分数据的展示若符合v-if的条件则显示大图部分的内容v-else则显示小图的内容。
解法参考 mounted() {// TODO补全代码实现需求axios.get(./goodsList.json).then((res){this.goodsListres.data;})}
我们使用axios来进行发送请求传入路径以及将获取到的数据赋值给goodsList数组。 div classbara classgrid-icon :class{active:index0} clickindex0/aa classlist-icon :class{active:index1} clickindex1/a/div
点击大小图标实现为其添加类classactive让其背景变成红色。我们先在data中定义一个index0然后我们为两个图标分别绑定事件点击第一个图标时将index赋值为0点击第二个图标时将index赋值为1。同时给两个图标都绑定active的类名当index等于0时第一个图标就添加了active类当index等于1时第二个图标就添加了active类。 !--grid 示例代码动态渲染时可删除--ul classgrid v-ifindex0 li v-for(item,index) in goodsList :keyindexa href#/3814 target_blank img :srcitem.image.large //a/li/ulul classlist v-elseli v-for(item,index) in goodsList :keyindexa href#/3814 target_blank img :srcitem.image.small //ap{{item.title}}/p/li/ul
最后我们使用v-for对获取到的数据进行遍历两个的主要区别就是图片的不同因此对图片的路径进行绑定然后当index0时说明是点击了第一个图标因此相应的部分显示否则使用v-else来显示另一个图标的内容。
好啦本文就到这里结束啦
