vue 实现多选
v-model
<template>
<!--用户页面-选择关注-->
<div class="follow">
<h4>选择关注</h4>
<p>请选择您感兴趣的分类,给您最精准的推荐</p>
<div>
<ul class="flexStart">
<li v-for="(item,index) in followLists" :key="index">
<input type="checkbox" :id="item.id" :value="item.id" v-model="selectedIndex"/>
<label :for="item.id" class="choice-item">{{item.txt}}</label>
</li>
</ul>
</div>
</div>
</template> <script>
export default {
name: 'userFollow',
data() {
return {
selectedIndex: [],
followLists: [
{id: 0, txt: '入职体检'},
{id: 1, txt: '入职体检'},
{id: 2, txt: '入职体检'},
{id: 3, txt: '入职体检'},
{id: 4, txt: '入职体检'}
]
}
}
}
</script> <style scoped>
h4 {
font-size: 18px;
}
.follow {
padding: 30px 0 0 10px;
float: left;
width: 400px;
color: #0c0c0c;
}
.follow h4 {
color: #358ee7;
}
.follow p {
margin-bottom: 12px;
}
// 隐藏input
.follow ul li input {
display: none;
}
// 设置lable样式
.choice-item {
float: left;
width: 120px;
height: 36px;
line-height: 36px;
text-align: center;
border-left: 6px solid #d6d6d6;
background-color: #eaeaea;
margin-bottom: 16px;
margin-right: 10px;
cursor: pointer;
}
// 设置选中项label样式
input:checked + .choice-item {
color: #fff;
border-left: 6px solid #0a69c7;
background-color: #358ee7;
}
</style>
vue 实现多选的更多相关文章
- vue实现全选效果
vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
- vue实现全选框效果
vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...
- [原]vue实现全选,反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...
- Vue实现勾选后向数组都添加
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue分页全选和单选操作
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...
- vue中全选和取消
1.效果预览 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- vue实现全选,反选
1.example.vue <template> <table class="table-common"> <tr> <th class= ...
- Angular/Vue多复选框勾选问题
此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...
- vue实现全选反选--简单使用
最近需要用到vue的反选全选功能,于是就在网上找了一些代码实现,发现都不能够完美的实现.于是乎决定自己写出一套.经过一翻努力,完美了进行了实现.bug也已经修复完毕,希望能够帮助到大家! < ...
- vue 项目 多选 问题
近期 vue 项目用到多选功能,引用的elementUI的级联多选 Cascader,但是没有效果. 后来发现是elementUI版本问题,我们项目用的是2.7.2版本,版本太低. 后来 卸载了 重新 ...
随机推荐
- Linux Centos6.5 SVN服务器搭建 以及客户端安装
转载:http://www.cnblogs.com/mymelon/p/5483215.html /******开始*********/ 系统环境:Centos 6.5 第一步:通过yum命令安装sv ...
- DirectShow设置采集帧率码率YUV<转>
// 设置参数,p1=宽,p2=高,p3=帧率 AM_MEDIA_TYPE *p = NULL; IAMStreamConfig *pSC = NULL; pCGB2->FindInterfac ...
- Linux系统基础5周入门精讲(服务器介绍)
使用工具:(1)源码管理(git工具):(2)自动部署:(3)web服务器 linux基础 服务器介绍 运维的职责:运行和维护服务器 1数据不能丢----大片不能没 2保证网站7*24小时允许---( ...
- ACM__队列
今天学回顾bfs的时候遇到了,遂总结一下 队列是一种特殊的线性表,只允许在队列的前端(front)进行删除操作,在队尾进行插入操作,进行插入操作的端称作队尾,进行删除操作的端称作对头.(来自百度百科) ...
- Flex_布局和容器
1.Halo组件也称MX组件,是Flex3的独有组件(按钮.文本字段.容器等).而Flex4引入了新一代的组件,称为Spark. Flex4同时支持Halo和Spark.但是很多Halo组件都有更 ...
- spark1.6.1 on yarn搭建部署
注:本文是建立在hadoop已经搭建完成的基础上进行的. Apache Spark是一个分布式计算框架,旨在简化运行于计算机集群上的并行程序的编写.该框架对资源调度,任务的提交.执行和跟踪,节点间的通 ...
- linux mce的一些相关内容和用户态监控的设计方法
之所以想起写一点关于mce的东西,倒不是因为遇到mce的异常了,之前遇到过很多mce的异常,内存居多,但没有好好记录下来,写这个是因为参加2018 clk南京会议的一点想法. void __init ...
- 【转】解决Eclipse中SVN版本信息不显示的问题
eclipse 中使用 svn 插件,原本正常,未作任何更改,最近几天突然eclipse 中查看文件时,文件后面的 版本号 . 文件的状态图标 等等都不见了.以为有插件冲突,卸载了好多其他的相关的插件 ...
- django 认证系统--2
使用django的认证系统 User 对象 User是认证系统的核心.典型代表是用户和你的站点进行交互还有限制访问.注册用户等等.django认证框架中,只存在一个User类,像'superuser' ...
- MongoDB分布式集群搭建
最近在做一个关于车险的项目,由于数据量较大,实验室的Boss决定采用HBase+ES/MongoDB这两种方案,并做性能对比,本人负责MongoDB方案.为了满足海量数据的存储要求,需要搭建一个分布式 ...