Question

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

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

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

Answer 1

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

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

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

要绑定到其他属性，请使用v-bind:或速记:，如下所示：

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

模板语法documentation

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',
      },
     ],
  },
})

Answer 3

只需使用属性名称，

例如

export default {
 data() {
    return {
       var: true 
     }
  }
}

html

<span v-if="var">I only appear when the condition is true</span>

Answer 4

您需要将row.name绑定到vue中的数据对象：

export default { data() { return { customDropdown: 'something', row: {name: 'something'}, } } }

，然后在v-if语句中使用它：

<div v-if="customDropdown == row.name">You see me if customDropdown is equal to row.name</div>

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

4 个答案: