vue v-model实现自定义样式多选与单选功能


Posted in Javascript onJuly 05, 2018

这两天在玩mpvue,但是下午如果对着文档大眼瞪小眼的话,肯定会睡着的。

想起昨晚的flag,我就想直接用demo上手吧,一举两得

谁想到我好不容易快做完了,v-model在小程序中不起作用!

vue v-model实现自定义样式多选与单选功能 

来不及研究为什么,我先直接在原来项目上赶紧建了一个test页面,先赶紧实现我的这种设想:

使用v-model和原生表单也可以实现这么好看且达到需求的效果。

重要的是不用自己跟在用户屁股后面屁颠屁颠的监听人家到底何时用了点击事件,又把点击事件用在何处了!

 效果图如下,和之前的没什么两样呢!

vue v-model实现自定义样式多选与单选功能vue v-model实现自定义样式多选与单选功能

具体实现我想,vue官网有关于表单输入绑定的讲解和demo,事实上,我只要做到利用他的demo把我的数据和样式调整一下就万事大吉了!

没有什么比简单解决一个功能更让人开心的了!

说干就干,我直接在原来项目代码的基础上动手:

之前的选项处理就一个li孤军奋战,数据渲染、样式切换、包括点击事件都绑定在上边,

ul.qus-list
   li(v-for="(item,index) in state.ExamInfo.QuestionAnswerCode" @click="choosed(index)" v-bind:class="{'li-focus' : chooseNum==index}" ref="liId") {{item.Code}}、{{item.Description}}

简直忙到没朋友啊有没有!光他和ul的长度差距就说明了一切!

现在我们把他要做的事分解一下:

现在他只负责v-for循环数据渲染

ul.qus-list
  li(v-for="(item,index) in state.ExamInfo.QuestionAnswerCode" v-bind:class="{'li-focus' : chooseNum==index}")

内部分配给他两个小弟

input:radio/checkbox和label,这俩人一个负责点击后与数据的绑定,一个负责样式。这么一说大神就明了了,好你可以走了,把沙发腾出来。

这俩人中,Input负责数据绑定,其实也就是利用v-model。具体原理直接看https://cn.vuejs.org/v2/guide/forms.html

input( type="radio" :value="item.Code" :id="'choice1'+index" v-model="picked")

然后时label负责样式。样式也包括用户看到的选项文本的展示:

label(:for="'choice1'+index" class="choice-item") {{item.Code}}、{{item.Description}}

至于他具体怎么负责样式?这个也利用了css的选择器

主要是:checked选择器和+相邻兄弟选择器

/*普通样式*/
   .choice-item{
    display: block;
    margin: .2rem auto 0;
   padding: .3rem .3rem .34rem;
   color: $qusTxt;
   font-size: .34rem;
   text-align: center;
    @include boxStyle(1rem,.12rem,rgba(49,32,114,0.16));
  }
 /*input被选中时,label的样式*/
 input:checked + .choice-item{
    background: $purpleClr;
   color: #FFF;
}

于是就有了这样的样式:

vue v-model实现自定义样式多选与单选功能vue v-model实现自定义样式多选与单选功能

这里可以看出,二者是相互成就的关系:

首先通过html那里,label的for属性和input的id属性关联,使得点击label的时候,input也就被选择上了。
然后是css样式这里,label除了自己正常的样式,还受input被选中状态的影响,当input被选中后(input:checked),作为input在li爸爸内部的唯一兄弟元素(+选择符),label的样式就被重新更新了选中态。

因为选中展示的效果被label做了,那么input也就可以归隐山林,幽香田园生活了。所以直接设置样式不可见即可。

 这也就是我上一篇说的,不会巧妙的利用每一个代码的特性。

而这一篇的实现方式正是还算巧妙的利用了该用的知识点。

也就不再需要li身上绑定的哪个choose事件来监听用户点击了。代码自己给我们做了!

甚至最后连用户选了什么都不用管,直接将v-model绑定的变量传给后端即可。

vue v-model实现自定义样式多选与单选功能vue v-model实现自定义样式多选与单选功能

强大的v-model!

总结

以上所述是小编给大家介绍的vue v-model实现自定义样式多选与单选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
小议javascript 设计模式 推荐
Oct 28 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
Javascript函数的参数
Jul 16 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
JS实现打砖块游戏
Feb 14 Javascript
基于vue展开收起动画的示例代码
Jul 05 #Javascript
微信小程序实现星级评分和展示
Jul 05 #Javascript
vue-router history模式下的微信分享小结
Jul 05 #Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 #Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 #Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 #Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
You might like
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
利用javascript查看html源文件
2006/11/08 Javascript
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
js中null与空字符串""的区别讲解
2019/01/17 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python实现指定字符串补全空格的方法
2015/04/30 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
在python里从协程返回一个值的示例
2019/02/19 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
python math模块的基本使用教程
2021/01/16 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
农救科工作职责
2013/11/27 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
消防安全管理制度
2014/02/01 职场文书
仓库文员岗位职责
2014/04/06 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
课外小组活动总结
2014/08/27 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书