vue点击切换颜色

只能点击一个

修改资料--类别

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;

}

}

})

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点击切换颜色限制个数

修改资料--类别

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;

}

}

}

})