Vue中如何使用v-if、v-else实现开关切换时启用/禁用状态提示

核心修改：替换硬编码的状态文本 #

你当前的问题是状态文本是固定写死的enabled，没有和开关绑定的isEnabled变量关联，按需求用v-if/v-else的实现方式如下：

修改后的HTML模板代码：

<div id="switch-wrapper">
  <!-- 替换原来的固定文本，新增v-if/v-else判断 -->
  <span v-if="isEnabled">enabled</span>
  <span v-else>disabled</span>
  <span class="switch">
    <input name="auto_campaign[enabled]" type="hidden" value="0">
    <input id="enabled" class="switch-input" type="checkbox" value="1"
    name="auto_campaign[enabled]" v-model="isEnabled"
    @change="toggleEnable" />
    <label class="switch-paddle enable-button" for="enabled"></label>
  </span>
</div>

可选简化写法（效果一致，代码更精简） #

如果不想写两个span标签，也可以直接用模板内的三元表达式实现，不需要v-if/v-else：

<span>{{ isEnabled ? 'enabled' : 'disabled' }}</span>

补充优化（避免初始状态不一致） #

如果存在开关初始状态和文本显示不匹配的问题，可以在组件初始化时同步isEnabled的初始值和后端返回的开关状态：

created() {
  // 初始同步开关状态
  this.isEnabled = this.autoCampaign.enabled
}

你原有toggleEnable方法的逻辑无需修改，和v-model绑定的逻辑兼容。

内容的提问来源于stack exchange，提问作者T dhanunjay