如何在 v-if 条件下使用 Vue.js 变量/参数

Question

我需要将一个动态变量传递给 v-if 属性。我尝试了多种方法，但没有产生预期的结果。

到目前为止，我有这个： v-if="customDropdown === {{row.name}}"

请问如何有条件地动态渲染元素？先感谢您。

原文由 Kanagaraj Subramaniam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你不能在 Vue 指令/属性中使用插值。

要绑定到 v-if 或 v-for 直接使用变量：

 <div v-if="value.someProperty"></div>

要绑定到其他属性/特性，请使用 v-bind: 或简写 : 如下所示：

 <div :directive="value"></div>

模板语法 文档

原文由 Dawid Zbiński 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

首先，您不能插入指令/属性，其次，不清楚，但我认为您想在迭代数组时检查条件。

您可以使用以下模板结构：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div
    v-for="row in arrayList"
    v-if="customDropdown === row.name"
    >
    Show row content: {{ row }}
  </div>
</div>

使用以下数据结构来实现您的目标：

 new Vue({
  el: '#app',
  data: {
    customDropdown: 'first',
    arrayList: [
      {
        name: 'first',
      },
      {
        name: 'second',
      },
     ],
  },
})

原文由 Jean Bonilha 发布，翻译遵循 CC BY-SA 4.0 许可协议