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框架）的更多相关文章

  1. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  2. vue实现简单的点击切换颜色

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Vue点击切换class

    <style> .active{ color: red; } </style> <ul id="app"> <li v-for='(ite ...

  4. Vue点击切换Class变化，实现Active当前样式

    刚自学Vue不久,所以还不太熟,所以直接上代码. 一.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个 ...

  5. 55.UIbutton点击切换颜色

    #import "ViewController.h" #define width_w     [UIScreen mainScreen].bounds.size.width #de ...

  6. vue 点击切换图标

    <div @click="showImg" class="showSearch"> <img class="header_img&q ...

  7. Vue实现active点击切换

    Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...

  8. VUE小练习(按钮颜色，数组映射)

    VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...

  9. vue实现选项卡切换--不用ui库

    vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui中的标签页, ...

随机推荐

  1. python 内存分析

    1.改源码重新编译打印相关信息 obmalloc.c 文件中打印 maxarenas,值为当前环境分配 arena 个数:分配 arena 时并没有马上分配对应的pools,故对于每一个 arena, ...

  2. [BZOJ5339] [TJOI2018]教科书般的亵渎

    题目链接 BZOJ题面. 洛谷题面. Solution 随便推一推,可以发现瓶颈在求\(\sum_{i=1}^n i^k\),关于这个可以看看拉格朗日插值法. 复杂度\(O(Tm^2)\). #inc ...

  3. BZOJ2115：[WC2011]Xor——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=2115 https://www.luogu.org/problemnew/show/P4151 这道 ...

  4. 洛谷 P1979 华容道 解题报告

    P1979 华容道 题目描述 小\(B\)最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面, 华容道是否根本就无法完成,如果能完成, 最少需要多少时 ...

  5. Java第一次实验报告——Java开发环境的熟悉

    北京电子科技学院(BESTI) 实    验    报    告 课程名称:java程序设计实验      班级:1352         姓名:洪韶武      学号:20135219 成绩:   ...

  6. AES encryption of files (and strings) in java with randomization of IV (initialization vector)

    http://siberean.livejournal.com/14788.html Java encryption-decryption examples, I've seen so far in ...

  7. Linux 守护进程创建原理及简易方法

    1:什么是Linux下的守护进程 Linux daemon是运行于后台常驻内存的一种特殊进程,周期性的执行或者等待trigger执行某个任务,与用户交互断开,独立于控制终端.一个守护进程的父进程是in ...

  8. Http字段含义

    转载自:http://blog.csdn.net/sand_ant/article/details/10503579 一.request请求Header简介 Accept:--客户机支持的类型 Acc ...

  9. .NET类型转型的四种做法(转)

    .NET类型转型的四种做法: ◆ 强制转型:(int)变量名称 ◆ int.Parse(字符串变量名称) ◆ Convert.To类型(变量名称) ◆ TryParse 强制转型 (casting) ...

  10. redis启动脚本

    #!/bin/sh # # Simple Redis init.d script conceived to work on Linux systems # as it does use of the ...