前几天写了一篇文章，内容主要是：用v-for创建的li，每个li都有一个类按钮（下文就称之为按钮），希望达到点击该按钮时e.target的背景图片发生变化、再点击该按钮e.target的背景图片又恢复成初始状态、如此循环的效果；为实现这一效果遇到了什么问题以及怎么解决的。原文连接如下：https://www.jianshu.com/p/82039efe8db1
当时想到的解决方案虽然达到了想要的效果，但是代码很冗杂烦乱，很是不理想。后来仔细认真思考了一下，要解决的问题就是判断某个li中的按钮是否被选中并显示出相应的状态。那么，form表单中的选框元素就能达到这个效果，比如checkbox，当选中时，input是一个样式，没有选中时input又是一个样式，根本不用写什么两个span来模拟一个按钮，而且也不用考虑怎么写选中和非选中时的样式。
开始的时候着重点放在了展示每个li的图片和文字上；却没有想到重点是哪个被选中，而且选中的结果是要提交给后台的，后台再根据提交内容做出相应的反馈。一旦想通了这一点，一切就变得简单起来。于是就有了后来的优化。
同样是使用v-for，优化后不是创建li，而是创建多选框，也就是之前的按钮了；之前每个li里边的图片则放在label标签里作为label的内容；文字等则放在了包裹多选框的div里。
html部分代码如下：
<form action="" class="itemform">
<div class="item col-md-3 col-xs-6" v-for="(item,index) in createAccount.menu" :key="'a'+index">
<label class="pic">
<img class="" :src="'image/account/'+item.img" alt="">
<input type="checkbox" name="usertype" v-model="checkedNames" :value="index">
</label>
<p>{{item.text}}</p>
<div v-show="item.ishelp" class="help">
<span>?</span>
<p v-show="item.helptext" class="helptext">{{item.helptext}}</p>
</div>
</div>
<div class="action">
<router-link to="/verify" class="next-page text-center">
<!--判断能否进入下一页（未验证） -->
<button type="submit" :disabled="containfag" class="btn">下一页</button>
</router-link>
</div>
</form>
优化为使用form表单的好处还有：可以使用v-model监测每个checkbox是否被选中以及哪一个被选中了。
js代码则更是大大简化，只是在data的return中添加了一行代码：checkedNames:[],该数组中的每一项就是被选中的checkbox的value值。methods、computed等都不用设置关于checkbox的任何内容（在现在的需求下是这样的）。优化后仅仅一行就搞定；而之前呢，那么冗长复杂，看了就头晕，说不定过几天连我自己都不知道为什么要那样写了。
还有一个好处不能忽略，就是方便提交选中元素的相关信息到后台。如果是之前的方案，说实话，提交起来肯定特别费力还不讨好。
总之，换成form表单之后，html部分的优化也许不明显，但是js部分的优化则是显而易见的，可读性可维护性等都得到了大幅度提升。
实践证明，多学习勤思考能写出更棒的代码，否则就会惨不忍睹哦！抓住问题的本质才能更好地解决问题，否则就算问题解决了也只是事半功倍哦！
新的一年，小伙伴们一起加油吧！
网友评论