vue实现div单选多选功能


Posted in Javascript onJuly 16, 2020

vue实现div单选多选功能,供大家参考,具体内容如下

单选

单选:

vue实现div单选多选功能

多选:

vue实现div单选多选功能

单选功能

DOM层:

<div class="labeloption" :class="{checked:ageActive == 11}" @click="changeStatus(11)">0-16岁</div>
 <div class="labeloption" :class="{checked:ageActive == 12}" @click="changeStatus(12)">17-25岁</div>
 <div class="labeloption" :class="{checked:ageActive == 13}" @click="changeStatus(13)">26-35岁</div>
 <div class="labeloption" :class="{checked:ageActive == 14}" @click="changeStatus(14)">36-45岁</div>
 <div class="labeloption" :class="{checked:ageActive == 15}" @click="changeStatus(15)">46-55岁</div>
 <div class="labeloption" :class="{checked:ageActive == 16}" @click="changeStatus(16)">55岁以上</div>

js层:

new Vue({
 el: '#home',
 data() {
 return {
 ageActive:11 //初始选中状态的元素id
 }
 },
 methods: {
 changeStatus(number){
 this.ageActive = number;
 }
 }
 })

单选功能主要利用的是vue的数据驱动原则改变当前dom元素的状态

多选功能

DOM层:

<div class="labeloption checked" @click="changeStatus($event,11)">0-16岁</div>
<div class="labeloption" @click="changeStatus($event,12)">17-25岁</div>
<div class="labeloption" @click="changeStatus($event,13)">26-35岁</div>
<div class="labeloption" @click="changeStatus($event,14)">36-45岁</div>
<div class="labeloption" @click="changeStatus($event,15)">46-55岁</div>
<div class="labeloption" @click="changeStatus($event,16)">55岁以上</div>

js层:

new Vue({
 el: '#home',
 data() {
 methods: {
 changeStatus(e,number){
 if (e.target.className.indexOf("checked") == -1) {
 e.target.className = "labeloption checked"; //选中div样式
 } else {
 e.target.className = "labeloption";//未选中div样式
 }
 }
 })

多选功能于单选功能不同,没有用到vue的数据驱动原则,单纯的操作dom元素,跟vue没啥关系。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
vue+AI智能机器人回复功能实现
Jul 16 #Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 #Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 #Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 #Javascript
详解js中的几种常用设计模式
Jul 16 #Javascript
JS寄快递地址智能解析的实现代码
Jul 16 #Javascript
详解js中的原型,原型对象,原型链
Jul 16 #Javascript
You might like
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
全面了解js中的script标签
2016/07/04 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python中的Numpy入门教程
2014/04/26 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
高三高考决心书
2014/03/11 职场文书
西岭雪山导游词
2015/02/06 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers