javascript - Vue - 根据属性有条件地绑定(bind)数据

Question

我有一个包含子组件的组件，该子组件具有我们可以绑定(bind)到的一些属性。喜欢:

<template>
  <div>
    <Child :bar="foo"></Child>
  </div>
</template>
<script>
export default {
  name: 'Parent',
  props: ['foo'],
}
</script>

现在我想有条件地绑定(bind)子组件的属性“bar”。例如，我想仅在父组件的“foo”属性不是 undefined 时才绑定(bind)子组件的属性“bar”，我该怎么做？

---

更新那些建议我使用 v-if 指令的人:

我认为，使用 v-if 指令 ISN'T 不是一个理想的解决方案。当条件变得复杂并且条件绑定(bind)属性的数量变大(如 5)时，情况将呈指数增长并导致非常长 if-elseif-else 链.它很丑，所以不。

我想知道是否有类似 REACT 的方法来解决这个问题 - 只需使用 vdom 并务实地进行绑定(bind)。但我不知道我是否可以在渲染函数中执行此操作，因为我没有发现任何 API 函数可以执行与子组件上的 v-bind 指令相同的操作。

Answer 1

你可以使用v-if:

<div v-if="foo">
  <Child :bar="foo"></Child>
</div>
<div v-else>
  <Child></Child>
</div>

但是，我建议您不要有条件地渲染。这是因为你可以检查 bar 属性不是 undefined。

---

更新:

我发现 v-bind with object 在你的情况下很有用:

<Child v-bind="{bar: foo || '' }"></Child>

此外，您可以这样尝试 - ES6 功能:(但我不确定这是否有效)

<Child v-bind="...(foo && {bar: foo})"></Child>