Ionic+Vue项目中如何实现点击按钮触发v-if切换视图内容

实现步骤 #

第一步：修正模板事件名大小写 #

Vue的事件绑定区分大小写，你模板里写的@click="BuyTicket"要和方法名保持一致，修改为：

<ion-icon @click="buyTicket" :icon="cartOutline"></ion-icon>

第二步：补充响应式状态声明 #

首先要在组件的data选项中声明boughtTicket布尔变量，作为区块切换的控制开关，初始值根据你默认要显示的区块设置：

data() {
  return {
    // 初始为true时默认显示当前购票区块，为false则默认显示另一块内容
    boughtTicket: true,
    // 其他变量...
  }
}

第三步：添加切换后的目标区块 #

在现有v-if区块的同级位置添加v-else区块，用来放你要切换的其他内容：

<div v-if="boughtTicket">
  <!-- 你现有购票区块的代码 -->
</div>
<div v-else>
  <!-- 这里放点击后要展示的其他内容，比如已购票提示、订单信息等 -->
  <ion-row>
    <ion-col>
      <p>购票成功</p>
    </ion-col>
  </ion-row>
</div>

第四步：补全buyTicket方法逻辑 #

你原来方法里存在两个问题：一是变量名写错了，把boughtTicket写成了buyTicket；二是判断用了赋值运算符=而不是比较运算符===。补全后的逻辑如下：

methods: {
  buyTicket() {
    // 如果需要先判断是否已经购票，加这个判断逻辑
    if (!this.boughtTicket) return
    // 执行购票相关的业务逻辑，比如调用接口、提示等
    // ...
    // 修改状态触发区块切换
    this.boughtTicket = false
  }
}

如果你的需求是点击可以来回切换两个区块，直接反转布尔值即可：

methods: {
  buyTicket() {
    this.boughtTicket = !this.boughtTicket
  }
}

内容的提问来源于stack exchange，提问作者FN PLY