vue项目中使用多选框的实例代码


Posted in Javascript onJuly 22, 2020

vue项目中使用多选框的实例代码

<section class="group-con-search newInp" style="margin:10px;">
      <el-input v-model="searchCon" placeholder="请输入搜索内容" @keyup.13.native="labelSearch">
       <i class="el-icon-search" slot="suffix" @click="labelSearch"></i>
      </el-input>
     </section>
     <div class="tmplmsg_keywords_list">
      <div class="checkbox" v-for="(item, index) in returnDate" :key="index">
       <input
        type="checkbox"
        :id="index"
        @change="currentSelect"
        :value="item"
        v-model="checkedNames"
       >
       <label :for="index" class="label">{{item.keyword_name}}</label>
      </div>
     </div>
     <div class="pitchon">
      <div class="name">
       <span>已选择(1/5)</span>
      </div>
      <div>
       <div class="checkbox list" v-for="(item, index) in returnDateArr" :key="index">
        <input
         type="checkbox"
         :id="index"
         @change="currentSelect"
         :value="item"
         v-model="checkedNames"
        >
       <label :for="index" class="label">{{item.keyword_name}}</label>
      </div>

	data(){
			return {
			returnDate:[],
			checkedNames: [],
	   returnDateArr: [],
	    searchCon: "", // 搜索内容
}

}

  currentSelect() {
   // checkbox 绑定的是checkedNames数组,选中或取消都存在里面 
   // 把值赋给returnDateArr
   this.returnDateArr = this.checkedNames;

   console.log(this.value)
   
   
  }
  .tmplmsg_keywords_list {
 height: 150px;
 overflow-y: scroll;
 padding-left: 10px;
}
.checkbox {
 display: block;
 height: 40px;
 line-height: 40px;
 padding-left: 12px;
 margin-right: 0;
}
input[type="checkbox"] {
 width: 14px;
 height: 14px;
 display: inline-block;
 text-align: center;
 vertical-align: middle;
 line-height: 18px;
 position: relative;
}
input[type="checkbox"]::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 background: #fff;
 width: 100%;
 height: 100%;
 border: 1px solid #d9d9d9;
}
input[type="checkbox"]:checked::before {
 content: "\2713";
 color: #fff;
 border: 1px solid #3190e8;
 background-color: #3190e8;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 font-size: 18px;
}
.label {
 vertical-align: sub;
 margin-left: 10px;
}

总结

到此这篇关于vue项目中使用多选框的实例代码的文章就介绍到这了,更多相关vue 使用多选框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 #Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 #Javascript
js实现查询商品案例
Jul 22 #Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 #Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 #Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 #Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 #Javascript
You might like
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
利用Python实现图书超期提醒
2016/08/02 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
教育科学研究生自荐信
2013/10/09 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
JS Canvas接口和动画效果大全
2021/04/29 Javascript
JavaScript实现优先级队列
2021/12/06 Javascript
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python