vue中如何点击切换按钮

Question

如何点击启用的时候变为停用，停用的时候变为启用。

Answer 1

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

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

对于列表而言，每行数据应该是循环出来的，你把state放进每行对应列表对象中就可以了

Answer 2

举个栗子：

1、表达式

<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>

Answer 3

你可以
设置两个按钮，通过v-show来显示；
或者
点击后改变按钮文字；

Answer 4

列表里面你写的参数放上来看一下。