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',
      }
    },
}