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都可以，希望大家共同进步。
你要去做一个大人，不要回头，不要难过。
“最卑微的喜欢，大概就是，即使是你拒绝我的时候，我都觉得你是为了我好。”
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
