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提交表单ajax查询实例代码
Oct 07 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
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桌面中心(二) 数据库写入
2007/03/11 PHP
php微信开发自定义菜单
2016/08/27 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
jquery parent和parents的区别分析
2013/10/02 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
Python2与Python3的区别详解
2020/02/09 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
美术毕业生求职信
2014/02/25 职场文书
生日宴会主持词
2014/03/20 职场文书
环境卫生标语
2014/06/09 职场文书
科技节口号
2014/06/19 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Python安装使用Scrapy框架
2022/04/12 Python
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers