vue active样式显示

html:代码
<ul>
            <li @click="current='xxxx'" :class="{active:current=='xxxx'}">休息休息</li>
            <li @click="current='xxxx1'" :class="{active:current=='xxxx1'}">休息休息</li>
            <li @click="current='xxxx2'" :class="{active:current=='xxxx2'}">休息休息</li>
            <li @click="current='xxxx3'" :class="{active:current=='xxxx3'}">休息休息</li>
        </ul>
css样式:
.active {
        background: rgb(21,149,136);
        color: white;
        border: 1px solid green;
    }
js代码:
export default {
    name: '',
    data() {
      return {
        current:'xxxx',
      }
    },
}

 

posted @ 2017-11-16 14:19  黄鹂  阅读(3606)  评论(0编辑  收藏  举报