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组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • java+vue实现添加单选题、多选题到题库功能

    java+vue实现添加单选题、多选题到题库功能

    本文为大家分享了java+vue实现添加选择题到题库功能的具体代码,供大家参考,具体内容如下 做个备份 数据库表: 后台接口 @DeleteMapping("deleteQuestion") @ApiOperation(value = "删除问题") public ServerResponse deleteQuestion(Integer id){ sysQuestionMapper.deleteByPrimaryKey(id); sysQuestionAnswer

  • vue实现单选和多选功能

    vue实现单选和多选功能

    本文实例为大家分享了vue实现单选和多选功能的具体代码,供大家参考,具体内容如下复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta> <title>Document</title> <script src="../vue.js"></script>

  • Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title> </head> <body> <!-- 单选按钮 --> <div id="app"> <input type="radio" valu

  • vue v-model实现自定义样式多选与单选功能

    这两天在玩mpvue,但是下午如果对着文档大眼瞪小眼的话,肯定会睡着的. 想起昨晚的flag,我就想直接用demo上手吧,一举两得 谁想到我好不容易快做完了,v-model在小程序中不起作用! 来不及研究为什么,我先直接在原来项目上赶紧建了一个test页面,先赶紧实现我的这种设想: 使用v-model和原生表单也可以实现这么好看且达到需求的效果. 重要的是不用自己跟在用户屁股后面屁颠屁颠的监听人家到底何时用了点击事件,又把点击事件用在何处了! 效果图如下,和之前的没什么两样呢! 具体实现我想,v

  • vue实现自定义多选与单选的答题功能

    本来实现多选单选这个功能,vue组件中在表单方面提供了一个v-model指令,非常的善解"猿"意, 能把我们的多选单选功能很完美的且很强大得双向绑定起来,实现多选单选任意选根本不在话下. 但是,凡事都有一个但是! 但是奈何这个项目设计稿的缘故,使用原生的表单组件是不可能使用了,请看ui图: 可悲的是,这个项目两个月后,我才来做项目复盘, 话说也就在此时,我才发现有一种更简单的方式来实现并且应用上v-model, 为什么要为了样式放弃功能然后自己吭哧吭哧傻-滴-呼呼的用js来实现了类似双

  • Vue切换div显示隐藏,多选，单选代码解析

    切换div显示隐藏 1)单个item下的部分dom结构,显示或隐藏切换,不会修改其它同级dom的显示/隐藏 template dom结构 <div class="list-item" v-for="(list,index) in jobList"> <p class="job-name">{{list.jobName}}</p> <p class="job-info"> <

  • vue实现div单选多选功能

    vue实现div单选多选功能,供大家参考,具体内容如下 单选 单选: 多选: 单选功能 DOM层: <div class="labeloption" :class="{checked:ageActive == 11}" @click="changeStatus(11)">0-16岁</div> <div class="labeloption" :class="{checked:ageAc

  • 基于jQuery下拉选择框插件支持单选多选功能代码

    基于jQuery下拉选择框插件支持单选多选功能代码

    由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu

  • RecyclerView实现流式标签单选多选功能

    RecyclerView简介 RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足.其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动).接下来讲解RecyclerView的用法. RecyclerView 基本用法 因为RecyclerView属于新增的控件,Android将RecyclerView定义在support库里.若要使用RecyclerView,第一步是要在build.g

  • 利用Vue.js指令实现全选功能

    因为刚开始接触vue不久,全选的实现参考了知乎上的实现方法: 1.从服务器拿到数据,为每个item设置checked属性 2.计算选中的数量selectCount,如果选中的数量与selectItems的数量相等,则全选selectAll选中 3.点全选时,将每个item的checked属性置为true,反选时置为false, 4.每次selectItems的属性发生变化时,都将checked的为true的item放入数组checkedGroups中 下面为实现代码: //全选 data: fu

  • 小程序实现单选多选功能

    小程序实现单选多选功能

    小程序的单选组件radio和多选组件checkbox的样式只提供更改颜色,这对实际项目中的需求显然是不够的,所以自己模拟实现一个. 踩坑点:小程序不支持操作dom 1.模拟实现多选框: 实现思路:思路非常简单,给每个选项绑定checked属性,类型为布尔值,点击取反即可 <!--wxml--> <view class='wrap'> <view class='checkbox-con'> <checkbox-group bindchange="check

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • vue.js实现单选框、复选框和下拉框示例

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

  • Vue实现购物车的全选、单选、显示商品价格代码实例

    Vue实现购物车的全选、单选、显示商品价格代码实例

    今天中午废了一会时间,总算把项目中的购物车的单选.全选.以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法: 购物车的基本页面如下: 先说实现的总体思路 1.给table表中表头th加一个 checkbox,设这两个事件:@click="checkAll" v-model="checkall": 2.给对应的tr加一个 checkbox 绑定一个事件 v-model="checked",checked设为数组,专门放商品Id: 3.

随机推荐