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. Codeforces 1025D（区间dp）

    容易想到设f[i][j][k]为i~j区间以k为根是否能构成bst.这样是O(n4)的.考虑将状态改为f[i][j][0/1]表示i~j区间以i-1/j+1为根能否构成bst.显然如果是i-1作为根的 ...

  2. hdu 3549 Flow Problem (网络最大流)

    Flow Problem Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tota ...

  3. BZOJ3926：[ZJOI2015]诸神眷顾的幻想乡——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3926 https://www.luogu.org/problemnew/show/P3346 幽香 ...

  4. 洛谷 P2324 [SCOI2005]骑士精神 解题报告

    P2324 [SCOI2005]骑士精神 题目描述 输入输出格式 输入格式: 第一行有一个正整数T(T<=10),表示一共有N组数据.接下来有T个5×5的矩阵,0表示白色骑士,1表示黑色骑士,* ...

  5. HDU1530 最大团 模板

    Maximum Clique Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  6. .net core 安装Swagger

    Install-Package Swashbuckle -Pre 1.Startup // This method gets called by the runtime. Use this metho ...

  7. Linux SSH 无密码登录

    1. ssh-keygen -t rsa 2. scp root@ip:/root/.ssh/id_rsa.pub ./id2 3. cat id2 >> authtorized_keys ...

  8. Centos 6 FTP 配置

    How to configure ftp server on centos 6 Posted  krizna  Centos FTP – File transfer protocol is used ...

  9. 透彻理解Spring事务设计思想之手写实现（山东数漫江湖）

    前言 事务,是描述一组操作的抽象,比如对数据库的一组操作,要么全部成功,要么全部失败.事务具有4个特性:Atomicity(原子性),Consistency(一致性),Isolation(隔离性),D ...

  10. 【洛谷 P3899】 [湖南集训]谈笑风生 （主席树）

    题目链接 容易发现\(a,b,c\)肯定是在一条直链上的. 定义\(size(u)\)表示以\(u\)为根的子树大小(不包括\(u\)) 分两种情况, 1.\(b\)是\(a\)的祖先,对答案的贡献是 ...