Question

我刚开始就被vuejs弄得一团糟。我遇到多个if条件的问题。

这就是我要使其正常工作的方式：

 <td v-if="!editing && selectedID === user.id">{{user.name}}</td>
 <td v-else>
   <input type="text" v-model="user.name" />
 </td>

用户单击“编辑”按钮并将编辑属性设置为true，然后如果下一个条件为true，则应显示输入，但不起作用。不知道为什么。

Answer 1

如果其余代码和标记正确，则您的代码应该可以工作。由于我们看不到其余的代码，因此我敢猜测您的“ td”元素不在“ table”元素中吗？如果是这样，它将无法正常工作。请参阅此工作示例以观察差异https://jsfiddle.net/skribe/sLaf7m0e/

<!-- Working Code -->
<table>
  <tr>
    <td v-if="!editing && selectedId === user.id">{{user.name}}</td>
    <td v-else>
      <input type="text" v-model="user.name" />
    </td>
  </tr>
</table>

<!-- Non Working Code -->
<div>
  <tr>
    <td v-if="!editing && selectedId === user.id">{{user.name}}</td>
    <td v-else>
       <input type="text" v-model="user.name" />
    </td>
  </tr>
</div>

为什么会这样，如果您检查dom，您会发现由于未使用表的正确标记，tr和td元素被忽略，导致所有字段都呈现在单个div元素。

Answer 2

您正在显示其他情况下的输入.....您必须这样做：

    <td v-if="editing && selectedID === user.id">
        {{user.name}}
        <input type="text" v-model="user.name"/>
    </td>
    <td v-else>
        <!-- do something else if condition is false -->
   </td>

vuejs中的多个if条件-如何使其工作

2 个答案: