Question

我试图在HTML元素中使用v-if指令隐藏div元素，如下所示：

<template v-if="(selectedProducts != 'Static Graphic' || selectedProducts != 'Other Support')">
  <div><strong>Content 2 Here</strong></div>
</template>

但是，这不起作用。

编写此逻辑/表达式的正确方法是什么？ MY JSFIDDLE demo

谢谢，

Answer 1

您可以在v-if中放置表达式。问题在于您的表达式：selectedProducts是一个数组，您无法测试selectedProducts != 'Static Graphic'

试试这个：

v-if="(selectedProducts.indexOf('Static Graphic') < 0  && selectedProducts.indexOf('Other Support') < 0)">

jsfiddle：https://jsfiddle.net/thierry36t/x2kc55p0/1/

Answer 2

VueJS有很棒的文档，所以你应该先看看https://vuejs.org/v2/guide/conditional.html

此处您可以跳过模板标记并将v-if移动到div中，如下所示：

<div v-if="selectedProducts != 'Static Graphic' || selectedProducts != 'Other Support'">
 Now you see me
</div>

看看这里：https://jsfiddle.net/bqe05f2w/1/

更新您的具体案例：

<template v-if="selectedProducts.indexOf('Static Graphic') > 0 || selectedProducts.indexOf('Other Support') > 0">
  <div><strong>Content 2 Here</strong></div>
</template>

VueJS2：v-if有多个表达式不起作用

2 个答案: