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 相关文章推荐
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 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生成二维码图片方法汇总
2016/12/17 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python模块smtplib学习
2018/05/22 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
六道php面试题附答案
2014/06/05 面试题
教师岗位职责范本
2013/12/29 职场文书
个人求职信范文分享
2014/01/06 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
骨干教师考核评语
2014/12/31 职场文书
2016公司年会通知范文
2015/04/25 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript