时间戳

首页 > 解决方案 > Vue - 根据属性有条件地绑定数据

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

问题描述

我有一个组件，其中包含一个子组件，该子组件具有我们可以绑定的一些属性。喜欢：

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

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

建议我使用v-if指令的人的更新：

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

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

标签： javascriptvue.js

解决方案

您可以使用v-if：

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

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

更新：

我发现v-bindwith object 在您的情况下很有用：

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

此外，您可以尝试这样 - ES6 功能：（但我不确定这是否有效）

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

推荐阅读