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.ajax)
Nov 19 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
JS随机密码生成算法
Sep 23 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
electron 如何将任意资源打包的方法步骤
Apr 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
基于mysql的论坛(4)
2006/10/09 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
破解Session cookie的方法
2006/07/28 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python中的随机函数random的用法示例
2018/01/27 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
签约仪式主持词
2014/03/19 职场文书
葬礼司仪主持词
2014/03/31 职场文书
师范大学生求职信
2014/06/13 职场文书