1、需求:之前遇到一个需求,就是一个话费兑换页面,其中有很多话费兑换的选项(10元话费、20元话费等等),点击其中一项后(例如我们点击了10元话费),会令10元话费这个选项框样式改变成其他颜色,并弹出兑换窗口用来输入验证码进行兑换(当然这个弹出窗会动态的提示你要兑换的是多少元的话费),该窗口可以点击取消,取消以后,再点击其他的兑换项(比如我们又点击了20元话费的兑换项)那么该兑换框会修改样式并将之前(10元话费的兑换框)样式还原,然后弹出(兑换20元话费的)对话框,大概就是这个需求,这种需求其实还蛮常见的,在此记录一下加深印象。
2、方案:我们这里使用Vue.js来实现,首先我们通过在mounted中获取到后台配置的产品数据(也就是我们在数据库中配置的可以供我们兑换的话费选择项),然后获取到以后,将获取到的数据赋值到我们之前在data中声明好的数据中,(这样我们的动态数据已经有了,只差将数据显示到页面中了),接下来我们通过v-for来循环将数据配置到我们的页面元素中去,配置好以后,我们的样式一定都是一样的,那么如何点击以后来改变颜色呢,我们可以添加一个@click事件,然后再在data中添加一个isActive变量(用来记录用户点击的是哪个选择项),我们赋isActive的初始值为-1,然后在@click点击事件触发的时候,将我们之前循环得到的每一个选择项的数据传递到方法中,在方法中将我们数据中的产品id(pid:每个产品唯一的id,数据库用来辨别产品的唯一字段)赋值给isActive变量(这里就是起到一个标记记录的作用),这样我们可以通过在元素中获取到data中的isActive来判断每个选择项是否被点击了,下一步我们为点击的选项添加不同的样式,我们可以通过使用:class结合三元表达式来绑定不同的class,然后在class中将我们想要的样式添加到选中的元素上,(三元表达式实现,因为我们之前已经在用户点击的过程中,将点击选择项的产品id赋值到data中的isActive中了,那么我们可以判断这个元素的pid是否和isActive相等,相等则说明选中的就是它,那么添加为选中样式的class,没选中则绑定之前的class即可),至于弹出框中动态地显示我们点击的选项,我们可以通过点击以后将上面循环得到的数据也传入到该方法中,然后动态的获取数据并赋值到弹出框中即可。
3、思路其实还蛮简单的,其实代码大部分都可以写出来主要就是思路特别的重要,如果有问题,可以评论区留言或是加我QQ都可以,希望大家共同进步。
你要去做一个大人,不要回头,不要难过。
“最卑微的喜欢,大概就是,即使是你拒绝我的时候,我都觉得你是为了我好。”