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 this用法小结
Dec 19 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
Javascript之Date对象详解
Jun 07 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 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
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
js实现自定义路由
2017/02/04 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
JavaScript如何操作css
2020/10/24 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
python实现清屏的方法
2015/04/30 Python
python图像处理之反色实现方法
2015/05/30 Python
Flask框架web开发之零基础入门
2018/12/10 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
客服实习的个人自我鉴定
2013/10/20 职场文书
招聘单位介绍信
2014/01/14 职场文书
公司年终奖分配方案
2014/06/16 职场文书
卫生标语大全
2014/06/21 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
Win10 Anaconda安装python-pcl
2022/04/29 Servers