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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
js异步编程小技巧详解
Aug 14 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
实现vuex原理的示例
Oct 21 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
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
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
php简单统计在线人数的方法
2016/05/10 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python 循环数据赋值实例
2019/12/02 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Python request中文乱码问题解决方案
2020/09/17 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
迟到检讨书大全
2014/01/25 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
个人贷款承诺书
2014/03/28 职场文书
贺卡寄语大全
2014/04/11 职场文书
英语教师个人工作总结
2015/02/09 职场文书
爱国主义影片观后感
2015/06/18 职场文书
学生会工作感言
2015/08/07 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers