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 06 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JS替换字符串中指定位置的字符(多种方法)
May 28 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 正则匹配函数体
2009/08/25 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php中strtotime函数用法详解
2014/11/15 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JavaScript入门基础
2015/08/12 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python中zip()方法应用实例分析
2016/04/16 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
初中考试作弊检讨书
2014/02/01 职场文书
党支部承诺书范文
2014/03/28 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
浅谈MySQL user权限表
2021/06/18 MySQL