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继承机制的设计思想分享
Aug 28 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
微信小程序-form表单提交代码实例
Apr 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
php笔记之:AOP的应用
2013/04/24 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
Javascript注入技巧
2007/06/22 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
深入解析Python中的urllib2模块
2015/11/13 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python实现定时发送qq消息
2019/01/18 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
酒店led欢迎词
2014/01/09 职场文书
男方父母证婚词
2014/01/12 职场文书
一年级小学生评语
2014/04/22 职场文书
营销与策划专业求职信
2014/06/20 职场文书
党员转正介绍人意见
2015/06/03 职场文书
金砖之国观后感
2015/06/11 职场文书
争做文明公民倡议书
2019/06/24 职场文书
编写python程序的90条建议
2021/04/14 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android