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 相关文章推荐
$.extend 的一个小问题
Jun 18 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
JavaScript实现商品评价五星好评
Nov 30 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提示Failed to write session data错误的解决方法
2014/12/17 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP实现图片压缩
2020/09/09 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
flexigrid 参数说明
2010/11/23 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python csv模块使用方法代码实例
2019/08/29 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
详解Python中的路径问题
2020/09/02 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
怎么写自荐书范文
2014/02/12 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
教你使用TensorFlow2识别验证码
2021/06/11 Python