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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
javascript 异常处理使用总结
Jun 21 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
vue之数据交互实例代码
Jun 16 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
JavaScript迭代器的含义及用法
Jun 21 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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 一个页面执行时间类代码
2010/03/05 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP实现微信提现功能
2018/09/30 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
浅析return false的正确使用
2013/11/04 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
python xpath获取页面注释的方法
2019/01/14 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
高中打架检讨书
2014/02/13 职场文书
平面设计求职信
2014/03/10 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
竞选学委演讲稿
2014/09/13 职场文书
介绍信模板
2015/01/31 职场文书
环卫个人总结
2015/03/03 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
html5表单的required属性使用
2021/07/07 HTML / CSS