html - 使用 v-if 根据变量的值显示 html 元素

Question

我想展示一个 <div>元素(包含几个嵌套的 <div> s)基于变量的值。我正在使用 v-if(不过如果有更好的方法，请告诉我)。

我试着把整个包裹起来 <div>在 <template v-if> (根据 https://vuejs.org/v2/guide/conditional.html 的建议)，但这不起作用，我使用 devtools 来验证我的变量设置是否准确。

<div v-if="myVar == 'option1' || 'option2'" class="...
     <div>...
     </div>
</div>

即使 myVar不等于 option 1或 option 2 ，元素仍然可见。

编辑:我添加了 v-if="myVar=='option1'"到 <img>并且它按预期运行 - 是否有关于 or(||) 的信息我使用不正确？

Answer 1

在 JavaScript 中，||如果第一个操作数是真值，则生成第一个操作数的值，如果第一个操作数不是真值，则生成第二个操作数的值。
因此，'option1' || 'option2'将始终产生 'option1' (参见下文)。

几点考虑:

从不使用 reserved words (即: var )来命名您的函数或变量。

表达式 'option1' || 'option2'将永远返回 'option1' , 如 'option1'是 String与 length大于 0 ，因此是一个真实的表达式。您可能正在寻找

v-if="['option1', 'option2'].indexOf(varName) > -1"

...这相当于

v-if="varName === 'option1' || varName === 'option2'"

...哪里 varName是保存您放入 var 中的任何内容的变量- 需要重命名(改为 varName 或您选择的任何其他名称，保留字除外)。

不惜一切代价避免使用松散的比较。 (使用 === 而不是 == )。它们为极难追踪的错误打开了大门。最好将变量转换为特定类型，然后允许它们具有多种类型的值。

当条件变长时，使用计算属性或方法被认为是一种很好的做法(一个好的经验法则是:当您需要超过 2 个操作数时，使用计算/方法)。
当您不需要传递任何参数而方法允许传递参数(即: v-for 中的当前项目)时，将使用计算属性。