如何为v-for渲染的输入框添加条件类is-static？

你的问题出在:class绑定的目标对象错误——你用answers[answerCount - 1]指向的是数组最新添加的元素，而非当前循环的旧元素。而你在addNewAnswer里已经正确给前一个元素设置了isEntered: true，只需要把类绑定到当前循环项的isEntered属性即可。

步骤1：修改输入框的绑定逻辑 #

把输入框的:class和@input都改成绑定当前循环的answer对象：

<p class="control">
  <input
      @input="answer.answer = $event.target.value" <!-- 替换原硬编码索引的写法，更可靠 -->
      type="text"
      class="input"
      :class="{ 'is-static': answer.isEntered }" <!-- 直接用当前循环项的isEntered -->
  >
</p>

步骤2：保留原addNewAnswer逻辑（无需修改） #

你现有的添加方法已经正确给前一个元素标记isEntered: true，不需要改动：

addNewAnswer() {
  const newAnswer = {
    id: Date.now(),
    answer: '',
    isEntered: false,
  };
  this.answers.push(newAnswer);
  this.answers[this.answerCount - 1].isEntered = true;
  this.answerCount += 1;
},

为什么原来的写法无效？ #

每次调用addNewAnswer后，answerCount会自增，answers[answerCount - 1]会指向数组最后一个（刚添加的新元素），而这个新元素的isEntered是false，所以旧元素永远不会被加上is-static类。通过绑定当前循环的answer.isEntered，每个输入框都会根据自己对应的对象属性来判断是否添加类，完全匹配你的需求。

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