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与函数式编程解释
Apr 27 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
js自定义瀑布流布局插件
May 16 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
vue实现拖拽进度条
Mar 01 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提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
python中的字典详细介绍
2014/09/18 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
python并发编程之线程实例解析
2017/12/27 Python
对Python w和w+权限的区别详解
2019/01/23 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
正风肃纪剖析材料
2014/02/18 职场文书
社团活动总结书
2014/06/27 职场文书
2014年统计工作总结
2014/11/21 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技