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 使用多选框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue表单绑定实现多选框和下拉列表的实例

    在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: <label>测试多选渲染:</label> <div> <template v-for="item in chks"> <input type="checkbox" name="hobby" :value="item.id" :checked="loopsss

  • Vue + element 实现多选框组并保存已选id集合的示例代码

    Vue + element 实现列表复选框并保存已选id集合 1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源 2.初始化tableData集合 3.循环遍历需要显示得值 4.在多选框组上添加chang事件 tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', addre

  • vue实现的树形结构加多选框示例

    vue实现的树形结构加多选框示例

    本文实例讲述了vue实现的树形结构加多选框.分享给大家供大家参考,具体如下: 前面说了如何用递归组件来写vue树形结构,写了树形结构还要在前面加多选框,然后往数组里push选项,并在左边显示出来,然后左边进行拖拽排序,拖拽排序上一篇文章我已经介绍过了,在这我就不介绍了,如何用阿里巴巴矢量图标库我也有相关文章,也不介绍了,本节主要介绍vue树形结构加多选框,并实现一定的逻辑,比如全选,单选,全选和单选之间的联动 先看下目录结构 下面我直接贴下代码 首先是pages文件夹中tree.vue页面中引用

  • 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=&q

  • vue项目中仿element-ui弹框效果的实例代码

    vue项目中仿element-ui弹框效果的实例代码

    最近要写个弹框,发现element-ui弹框样式还可以,就copy下来改吧改吧.也不分步骤详细介绍了直接上代码. 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来 message文件夹 src文件夹 index.js import Message from './src/main.js'; export default Message; mian.js import Vue from 'vue'; import Main from './main.vue'; le

  • vue项目中使用vue-layer弹框插件的方法

    vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 参数说明 { type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) title: '信息', content: '', area: 'auto', offset: 'auto', icon: -1, btn: '确定', time: 0

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • Yii实现复选框批量操作实例代码

    整理文档,搜刮出一个Yii实现复选框批量操作实例代码,稍微整理精简一下做下分享. 在视图下 <?php $this->widget('zii.widgets.grid.CGridView', array( 'id'=>'user-grid', 'dataProvider'=>$model->search(),//Model里需要有个search()方法,$model是Controller中传递的Model对象 // /'filter'=>$model, 'columns

  • jquery在项目中做复选框时遇到的一些问题笔记

    关于复选框 昨天在做一个复选框的时候,一开始以为应该挺简单的,想当然了一下,主要的功能就是点击一个按钮,比如是全部选中这个一个功能,然后下面的所有列表全部选中的效果. 后来在实践中还是遇到了很多的问题,注意在input的checkbox中,用普通的attr属性来判断是不可以的,因为checked的值是checked,只有用prop这个属性才能该改变!!!!见api文档,后来在百度中发现了这个在官方的api中就已经有说明了,附上jquery中一个prop的api地址http://api.jquer

  • vue项目中axios请求网络接口封装的示例代码

    每个项目网络请求接口封装都是很重要的一块,第一次做Vue项目,我们的封装方法如下: (1).新建一个js文件,取名api.js (2).引入 axios ,mint-UI ,如下图: import axios from 'axios' import {MessageBox, Toast} from 'mint-ui' axios.defaults.timeout = 50000//默认请求超时时间 axios.defaults.headers = '请求头' (2).封装get方法 export

  • vue项目中使用eslint+prettier规范与检查代码的方法

    1.前言   在团队协作中,为避免低级 Bug.以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范.使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量.EsLint 则是其中一个很好的工具. EsLint 提供以下支持: ES6 AngularJS JSX Style 检查 自定义错误和提示 EsLint 提供以下几种校验: 语法错误校验 不重要或丢失的标点符号,如分号 未被使用的参数提醒 漏掉的结束符,如} 确保样式的统一规则,如 sass 或者

  • vue项目中canvas实现截图功能

    vue项目中canvas实现截图功能

    本文实例为大家分享了vue项目中canvas实现截图功能的具体代码,供大家参考,具体内容如下 实现效果: 整理一下最近在vue项目中做的一个截图功能(只能够截取图片),即用鼠标在画布上进行框选截取. 思路大概如下:做一个弹窗,打开弹窗的时候传入要截的图,接下来在这个窗口里面,点击截图按钮,开始截图,点击取消按钮,取消截图. 窗口里面的html主要是三个部分,一个是可截图区域,一个是截取图片的回显,一个是操作按钮(截图按钮和取消截图按钮). 部分html: <!--截图区域--> <div

  • VUE项目中封装Echart折线图的方法

    本文实例为大家分享了VUE项目中封装Echart折线图的具体代码,供大家参考,具体内容如下 封装Echart折线图,可显示多条折线 1. 首先在项目中全局引入Echarts,main.js中: import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 2.components中新建组件baseLineChart.vue,以下代码直接复制: <template>     <div       id="b

随机推荐