vue中如何點(diǎn)擊切換按鈕

舉個(gè)栗子：

1、表達(dá)式

<template>
      <div>
          <a class="button1" @click ="changeStatus"> {{btnStatus?'啟用':'停用'}}</a>
      </div>
</template>

<script>
export default {
    data(){
        return {
            btnStatus: true,
        }
    },
    methods:{
        changeStatus(){
            this.btnStatus = this.btnStatus ? false : true ;
        }
    }
  
}
</script>

<style>

</style>

2、v-if 或 v-show ：

<template>
      <div>
          <a class="button1" @click ="changeStatus" v-if= "btnStatus == 0 "> 啟用</a>
          <a class="button2" @click ="changeStatus" v-show="btnStatus == 1 "> 停用</a>
      </div>
</template>

<script>
export default {
    data(){
        return {
            btnStatus: 0,
        }
    },
    methods:{
        changeStatus(){
            this.btnStatus = this.btnStatus === 0 ? 1 : 0 ;
        }
    }
  
}
</script>

<style>

</style>

你可以
設(shè)置兩個(gè)按鈕，通過(guò)v-show來(lái)顯示；
或者
點(diǎn)擊后改變按鈕文字；

列表里面你寫(xiě)的參數(shù)放上來(lái)看一下。

<template>
    <div @click="state = !state">{{state ? '啟用' : '停用'}}</div>
</template>

export default{
    data(){
        return{
            state: true
        }
    }
}

對(duì)于列表而言，每行數(shù)據(jù)應(yīng)該是循環(huán)出來(lái)的，你把state放進(jìn)每行對(duì)應(yīng)列表對(duì)象中就可以了