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 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
JavaScript Split()方法
Dec 18 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 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
global.php
2006/12/09 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
零基础php编程好学吗
2019/10/11 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
利用Python获取操作系统信息实例
2016/09/02 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python 图片去噪的方法示例
2019/07/09 Python
python super函数使用方法详解
2020/02/14 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
四年级语文教学反思
2014/02/05 职场文书
赔偿协议书范本
2014/04/15 职场文书
停电调休通知
2015/04/16 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
高三生物教学反思
2016/02/22 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
Redis三种集群模式详解
2021/10/05 Redis