vue开关案例

上代码

<div v-for="(item, index) of list" :key="index">
        {{ item.aaa
        }}<el-switch
          @change="qwe(item)"
          :active-value="1"
          :inactive-value="0"
          style="display: block"
          v-model="item.kong"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="按月付费"
          inactive-text="按年付费"
        >
        </el-switch>
      </div>
<div>
        <el-input v-model="input"></el-input>
        <el-button type="success" @click="add">新增</el-button>
      </div>

data() {
    return {
      list: [
        { id: 1, aaa: "路飞", kong: 1 },
        { id: 2, aaa: "索隆", kong: 0 },
        { id: 3, aaa: "山治", kong: 1 },
        { id: 4, aaa: "乔巴", kong: 0 },
        { id: 5, aaa: "甚平", kong: 1 },
        { id: 6, aaa: "乌索普", kong: 0 },
      ],
      input: "",
    };
  },
  methods: {
    qwe(val) {
      if (val.kong == 0) {
        console.log(val.aaa);
        console.log("关");
      } else if (val.kong == 1) {
        console.log(val.aaa);
        console.log("开");
      }
    },
    add() {
      this.list.push({
        id: this.list.length + 1,
        aaa: this.input,
        kong: 0,
      });
      this.input = "";
    },
  },