vuejs 基本条件渲染问题

Question

我只是想在数据中找到名称时显示跨度。如果在数据中找不到它，我希望隐藏跨度。我正在使用简单的 v-if 或 v-else.It 当前显示“我的名字在数据中”。但事实并非如此。我基本上会有一些名字......并且希望“我的名字在数据中”仅在名称确实存在时显示。

new Vue({
  el: "#app",
  data: {
    FirstName:'Paul',
   
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

 <span v-if="FirstName=='lu'||'John'||'Sue'">
  My Name is in the data
 </span><br>
 <span v-else>
   Not available
 </span>
</div>

Answer 1

我认为你的条件语句像这样更好

new Vue({
  el: "#app",
  data: {
    FirstName:'Paul',
   
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

 <span v-if="FirstName=='lu'|| FirstName=='John' || FirstName=='Sue'">
  My Name is in the data
 </span>
 <span v-else>
   Not available
 </span>
</div>

Answer 2

在 Javascript 中，non-empty 字符串被视为 true ("truthy") in boolean expressions, and equality is of a higher operator precedence 而不是布尔 OR (||)。因此，作为布尔值，您的表达式读起来好像是：

(FirstName=='lu') || true || true

上面的表达式总是true，所以你的元素总是可见的。

与一样，您需要阅读：

FirstName=='lu'||FirstName=='John'||FirstName=='Sue'

或带空格：

FirstName == 'lu' || FirstName == 'John' || FirstName == 'Sue'

Answer 3

您还可以使用 Array.includes in your v-if condition 检查 FirstName 是否在任何一组值中。

<span v-if="['lu', 'John', 'Sue'].includes(FirstName)">
  My Name is in the data 
 </span>
 <span v-else>
   Not available
 </span>

vuejs 基本条件渲染问题

vuejs basic conditional rendering issue

vue.js