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 相关文章推荐
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
详解JavaScript作用域 闭包
Jul 29 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php array_unique之后json_encode需要注意
2011/01/02 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Pycharm调试程序技巧小结
2020/08/08 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
大专学生推荐信范文
2013/11/19 职场文书
全运会口号
2014/06/20 职场文书
赞助商致辞
2015/07/30 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书