vue点击切换颜色限制个数（用了mui框架）
vue点击切换颜色
只能点击一个
<!doctype html><head>
<meta charset="UTF-8">
<title>修改资料--类别</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../../css/modify-categroy.css" />
</head> <body>
<div id="categroy" v-cloak>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">类别</h1>
<span class="mui-save mui-pull-right">保存</span>
</header>
<div class="mui-content">
<div class="categroy-box" >
<span class="categroy-btn " v-for="(item,index) in items" :class='{active:changeActive == index }' @tap="isActive(index)">{{item.msg}}</span>
</div>
</div>
<p>最多可选择三项</p>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/vue.js"></script>
<script type="text/javascript">
mui.init()
var categroy = new Vue({
el:'#categroy',
data:{
items:[{
msg: '电影'
},{
msg: '剧集'
},{
msg: '综艺'
},{
msg: 'MV'
},{
msg: '记录'
},{
msg: '广告'
},{
msg: 'VR'
},{
msg: '动漫'
},{
msg: '其他'
}
],
changeActive:0
},
mounted:function() { },
methods: {
isActive:function(index) {
var _this = this;
_this.changeActive = index;
}
}
})
</script>
</body>
less
用less实现
#categroy {
.mui-bar {
background: #fff;
box-shadow: none;
border-bottom: 1px solid #c8c7cc;
.mui-icon {
color: #c8c7cc;
}
.mui-save {
padding: 14px 10px;
margin: 0 -10px;
font-size: 14px;
} }
.mui-content {
width: 100%;
height: 100%;
background: #ffffff;
.categroy-box {
margin: 13px 30px;
.categroy-btn {
display: inline-block;
width: 23%;
line-height: 2;
margin: 0 5px 8px 0;
text-align: center;
font-size: 1.6rem;
}
.active {
border-radius: 16px;
color: #ffffff;
background: #0189ff;
} }
}
p {
margin: 12px 0 0 20px;
font-size: 1.6rem;
} }
vue点击切换颜色限制个数
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>修改资料--类别</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../../css/modify-categroy.css" />
</head>
<body>
<div id="categroy" v-cloak>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">类别</h1>
<span class="mui-save mui-pull-right">保存</span>
</header>
<div class="mui-content">
<div class="categroy-box" >
<span class="categroy-btn " v-for="(item,index) in items" :class='{active:item.checked }' @tap="isActive(item)">{{item.msg}}</span>
</div>
</div>
<p>最多可选择三项</p>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/vue.js"></script>
<script type="text/javascript">
mui.init()
var categroy = new Vue({
el:'#categroy',
data:{
items:[{
msg: '电影'
},{
msg: '剧集'
},{
msg: '综艺'
},{
msg: 'MV'
},{
msg: '记录'
},{
msg: '广告'
},{
msg: 'VR'
},{
msg: '动漫'
},{
msg: '其他'
}
]
},
mounted:function() {
},
methods: {
isActive:function(item) {
var _this = this;
var a = document.getElementsByClassName('active');
//如果active class的checked是否存在
if(typeof item.checked == 'undefined') {
if(a.length<3){
console.log(a.length)
//全局创建
//Vue.set(item,'checked',true);
//局部创建
_this.$set(item,'checked',true);
}else {
mui.toast('最多选择三项')
}
}else{
item.checked = !item.checked;
}
}
}
})
</script>
</body>
</html>vue点击切换颜色限制个数（用了mui框架）的更多相关文章
- vue点击切换样式，点击切换地址栏，点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- vue实现简单的点击切换颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Vue点击切换class
<style> .active{ color: red; } </style> <ul id="app"> <li v-for='(ite ...
- Vue点击切换Class变化，实现Active当前样式
刚自学Vue不久,所以还不太熟,所以直接上代码. 一.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个 ...
- 55.UIbutton点击切换颜色
#import "ViewController.h" #define width_w [UIScreen mainScreen].bounds.size.width #de ...
- vue 点击切换图标
<div @click="showImg" class="showSearch"> <img class="header_img&q ...
- Vue实现active点击切换
Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...
- VUE小练习(按钮颜色，数组映射)
VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...
- vue实现选项卡切换--不用ui库
vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui中的标签页, ...
随机推荐
- vue-cli项目打包出现空白页和路径错误问题
vue-cli项目打包: 1. 命令行输入:npm run build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 第一个问题,文件引用路径.我们直接运行打包后的文件夹 ...
- Linq的模糊查询（包含精确模糊查询）
目录: 1.判断是否为空或者null 2.普通包含模糊查询 1)以某字符串开头的模糊查询 2)以某字符串结尾的模糊查询 3)包含某字符串的模糊查询 3.精确到字符串对应位数字符的模糊查询(*重点) l ...
- CentOS httpd服务（Apache）
1.从ISO镜像安装,Apache 服务的软件包名称为 httpd #检查源配置[root@localhost media]# cat /etc/yum.repos.d/CentOS-Media.re ...
- 【题解】CF#855 G-Harry Vs Voldemort
个人感觉挺有意思的,然而被颜神D无聊惹(-￣▽￣)- 这题我们可以首先试图去统计以每一个点作为 w 点所能对答案造成的贡献是多少.不难发现,当且仅当 u 和 v 都在 w 所在边双的一侧的时候不能构成 ...
- [NOI2009]诗人小G 决策单调性优化DP
第一次写这种二分来优化决策单调性的问题.... 调了好久,,,各种细节问题 显然有DP方程: $f[i]=min(f[j] + qpow(abs(sum[i] - sum[j] - L - 1))); ...
- BZOJ2823 [AHOI2012]信号塔 【最小圆覆盖】
题目链接 BZOJ2823 题解 最小圆覆盖模板 都懒得再写一次 #include<iostream> #include<cstdio> #include<cmath&g ...
- 51nod1199:Money out of Thin Air（线段树）
按dfs序一个一个加入线段树,可以让任何一颗子树的节点在线段树中连续,于是就可以用线段树维护整棵树了 和树剖的思想是一样的,大概一眼就看出来了,但是写了两个半天(躺 总结:记住以后写完数据结构或者数字 ...
- BZOJ2791 Rendezvous
Description给定一个n个顶点的有向图,每个顶点有且仅有一条出边.对于顶点i,记它的出边为(i, a[i]).再给出q组询问,每组询问由两个顶点a.b组成,要求输出满足下面条件的x.y:1. ...
- 【图论】Floyd消圈算法
毫无卵用的百度百科 Definition&Solution 对于一个给定的链表,如何判定它是否存在环以及环的长度问题,可以使用Floyd消圈算法求出. 从某种意义上来讲,带环的链表在本质上是一 ...
- Dom中select练习
选择框checkbox练习 select练习 注意select的selected属性 <!DOCTYPE html> <html xmlns="http://www.w3. ...