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中的View-Model使用介绍
Aug 11 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
基于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
Windows下的PHP安装pear教程
2014/10/24 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
js实现登录时记住密码的方法分析
2020/04/05 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python内置数据类型详解
2014/08/18 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Django开发中的日志输出的方法
2018/07/02 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python计算导数并绘图的实例
2020/02/29 Python
linux下进程间通信的方式
2013/01/23 面试题
新闻编辑自荐书范文
2014/02/12 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书