Vue.js变量声明与比较问题：数字末位条件渲染失效

你的代码存在几个关键问题，导致v-if条件判断无法正常工作，下面逐一说明并给出修正方案：

问题1：未正确更新data中的lastDigit变量 #

你的check方法里定义了局部变量lastDigit，赋值后仅return但没有修改Vue实例data中的lastDigit。页面绑定的是data里的变量，所以计算结果根本没同步到页面上。

问题2：第三个v-if存在语法错误 #

原代码里的lastDigit != lastDigit''< 10是完全错误的语法，正确的判断应该是lastDigit !== null && lastDigit < 10。

问题3：条件判断逻辑重叠 #

三个独立的v-if会让符合多个条件的数字（比如数字1同时满足<3、<7、<10）同时显示所有选项，不符合“显示对应三个选项之一”的需求，应该用v-else-if来确保只触发第一个符合条件的分支。

问题4：初始值类型不匹配 #

lastDigit初始为字符串''，而计算得到的是数字类型，判断时容易出现类型混淆，建议初始化为null更合理。

修正后的完整代码 #

<template>
  <q-page padding>
    <div>
      <h1 class="heading">Glückscode eingeben</h1>
      <input class="input" v-model.number="code" />
      <br>
      <button class="input" @click="check">Überprüfen</button>
    </div>
    <div><h3>{{ lastDigit }}</h3></div>
    <!-- 用v-else-if保证仅显示第一个符合条件的选项 -->
    <div v-if="lastDigit !== null && lastDigit < 3">
      <h2>{{ optionA }}</h2>
    </div>
    <div v-else-if="lastDigit !== null && lastDigit < 7">
      <h2>{{ optionB }}</h2>
    </div>
    <div v-else-if="lastDigit !== null && lastDigit < 10">
      <h2>{{ optionC }}</h2>
    </div>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      code: '',
      lastDigit: null, // 初始化为null，避免类型混淆
      optionA: '50% Rabatt',
      optionB: '75% Rabatt',
      optionC: '100% Rabatt',
      show: true
    }
  },
  methods: {
    check() {
      // 直接修改data中的lastDigit，而非局部变量
      this.lastDigit = this.code % 10;
      console.log(this.lastDigit);
    }
  }
})
</script>

关键修改点说明 #

1. 更新check方法：移除冗余的参数，直接给this.lastDigit赋值，确保页面能同步获取计算结果。
2. 修复v-if语法与逻辑：修正第三个判断的语法错误，将三个独立v-if改为v-if + v-else-if的链式结构，避免多选项同时显示。
3. 调整初始值：将lastDigit初始值改为null，判断时用lastDigit !== null确保用户已输入有效数字。

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