vue实现自定义多选按钮

2024-10-03 01:53:20

本文实例为大家分享了vue实现自定义多选按钮的具体代码，供大家参考，具体内容如下

图示

返回的选中列表是一个数组

html部分

<!-- 自定义多选 -->
 <div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel(index,item)">{{item.val}}</div>

js部分

//data

arr:[
   {
   val:1,
   ischeck:false
   },
   {
   val:2,
   ischeck:false
   },
   {
   val:3,
   ischeck:false
   },
   {
   val:4,
   ischeck:false
   },
   {
   val:5,
   ischeck:false
   },
   {
   val:6,
   ischeck:false
   }
  ],
  selarr:[],

//methods
sel(index,item){
  let arr=[...this.arr];
  let selarr=[...this.selarr];
  if(arr[index].ischeck==false){
   arr[index].ischeck=true;
   selarr.push(item)
  }else{
   arr[index].ischeck=false;
   var index11=selarr.indexOf(index)
   selarr.splice(index11,1)

  }

  this.arr=arr;
  this.selarr=selarr;

},

样式

.list{
 width: 100%;
 line-height: 30px;
}

.list.active{
 background: pink;
}

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

vue 表单之通过v-model绑定单选按钮radio

用v-model绑定单选框能带来很多便捷的开发体验. 基础用法 <template> <div id="app"> <input type="radio" id="male" value="Male" v-model="gender"> Male <input type="radio" id="female" value=&q
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下面给大家介绍Vue.js表单标签中的单选按钮.复选按钮和下拉列表的取值问题. 摘要: 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 一.单选按钮单选按钮:单选按钮用
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）

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

本文实例为大家分享了vue实现自定义多选按钮的具体代码,供大家参考,具体内容如下图示返回的选中列表是一个数组 html部分  <div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel(index,item)
vue实现自定义多选与单选的答题功能

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

目录一.在src下新建directive文件夹二.定义index.js文件,在vue上注入自定义指令三.编写自定义指令四.使用一.在src下新建directive文件夹二.定义index.js文件,在vue上注入自定义指令 import hasBtn from './permission/hasBtn' const install = function (Vue) { Vue.directive('hasBtn', hasBtn) } if (window.Vue) { window
vue项目中应用ueditor自定义上传按钮功能

由于上传地址问题,需要自定义上传按钮,效果如图由于在页里面没有操作dom,所以想到了用vue的自定义事件绑定$emit .$on来把点击事件传递给ueditor. 首先是给ueditor添加自定义按钮: 1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love" ueditor.all.js 2,给按钮添加事件还是在ueditor.all.js文件内找到commands指令给刚才定义的按钮扩展事件,
基于Vue自定义指令实现按钮级权限控制思路详解

思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮
Vue自定义多选组件使用详解

本文实例为大家分享了Vue自定义多选组件使用的具体代码,供大家参考,具体内容如下子组件(选项卡) checkBoxCard.vue <template> <div class="checkBoxCard"> <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()"> {{ name }} </d
Android超详细介绍自定义多选框与点击按钮跳转界面的实现

总程:在avtivity_main.xml设计5个控件,btn1-5,点击btn1弹出一个多选对话框,点击按钮btn1弹出一个多选框可选择你喜欢的打野英雄,点击btn2跳转到activity_main2界面(就是图片,不可选择)设计思路流程:在activity_main.xml布局界面,总体在头目录进行垂直排列,然后镶嵌5个水平的线性布局(左是ImageView,右边是Button按钮)由于5张图的大小在一个屏幕显示不出来,所以添加一个ScoveView滚动,以使所有资源可以看到! 在MainA
C#实现自定义单选和复选按钮样式

目录实践过程效果代码实践过程效果代码 public partial class GlorifyCheckBox : CheckBox { public GlorifyCheckBox() { InitializeComponent(); FontAspect = getAspect(); //获取当前控件文本的读取方向 } #region 变量 private bool FontAspect = false; //判断字体的方向 private int Measurement = 2
Vue 通过自定义指令回顾v-内置指令(小结)

Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上,尽量不去操作增删改 DOM.通过了解如何去自定义指令,可以想象内置指令是如何完成的. 内置指令指令名称描述使用 v-model 绑定数据 <\input v-model="message"> v-text 输出文本,不能解析标签 <

vue实现自定义多选按钮

相关推荐

随机推荐