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. javascript标准对象与包装对象

    javascript标准对象与包装对象 标准对象 在JavaScript的世界里,一切都是对象. 但是某些对象还是和其他对象不太一样.为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是 ...

  2. [SDOI2014][BZOJ3533] 向量集 [线段树+凸包]

    题面 BZOJ传送门 思路 首先当然是推式子 对于一个询问点$(x_0,y_0$和给定向量$(x_1,y_1)$来说,点积这么表达: $A=x_0x_1+y_0y_1$ 首先肯定是考虑大小关系:$x_ ...

  3. 你可能使用了Spring最不推荐的注解方式

    前言 使用Spring框架最核心的两个功能就是IOC和AOP.IOC也就是控制反转,我们将类的实例化.依赖关系等都交由Spring来处理,以达到解耦合.利用复用.利于测试.设计出更优良程序的目的.而对 ...

  4. Android Fragment 使用详解

    虽然网上有很多关于Fragment的文章,但我这里还是要写这篇笔记,因为我在编写程序的过程中发现了一个问题,至今未解决,希望得到大家的帮助: PS:当我在Fragment中定义一个名为setIndex ...

  5. props设置state误区

    class Component extends React.Component { constructor(props) { super(props); this.state = { value: t ...

  6. 笔记-树形dp

    this is not a 正经的note you may not understand Problem 1:二叉树,有权,要选它父亲才能选它,$n\leq200,m\leq500$ I: $dp_{ ...

  7. Java 匿名内部类 只能访问final变量的原因

    文章来源:http://blog.sina.com.cn/s/blog_4b6f8d150100qni2.html 1)从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方 ...

  8. 【初级算法】6. 两个数组的交集 II

    题目如下: 给定两个数组,写一个方法来计算它们的交集. 例如: 给定 nums1 = [, , , ], nums2 = [, ], 返回 [, ]. 注意: 输出结果中每个元素出现的次数,应与元素在 ...

  9. MyEclipse下项目的包层次结构调整

    新电脑安装完MyEclipse,导入项目后发现MyEclipse下项目的包层次结构变成了Flat,平面模式,这种模式感觉特别不好, 不能清晰地显示出项目的包层次结构.这样,显示出的包的结构不够明显,我 ...

  10. HDU3585 最大团+二分

    maximum shortest distance Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...