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="/go.html?url=../../css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" href="/go.html?url=../../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> <h
