Vue.js 三元表达式 vs v-show

Question

我必须有条件地更改图标类型 play/pause，通过 props 传递它。

在这种情况下，我应该使用三元表达式来传递正确的 prop 吗？

<my-icon :icon="!isPlaying ? 'play' : 'pause'"></my-icon>

还是用v-show效果最好？

<my-icon v-show='!isPlaying' :icon='play'></my-icon>
<my-icon v-show='isPlaying' :icon='pause'></my-icon>

提前致谢！

Answer 1

TLDR: 两者都应该没问题，由此产生的性能差异应该可以忽略不计。

其他想法：

就性能而言，我认为渲染时间的差异可以忽略不计。作为个人喜好，第一个的用法似乎对我更有吸引力，因为它只将一个 <my-icon /> 元素插入 DOM 而不是两个并隐藏一个。

作为 v-show 的替代方法，您可以使用 v-if 条件指令甚至不呈现不会在 DOM 中显示的元素，例如上面的两个。与示例 1 类似，这将导致 DOM 中一次只有一个。以下是 v-if:

的用法

<my-icon v-if='!isPlaying' :icon='play'></my-icon>
<my-icon v-if='isPlaying' :icon='pause'></my-icon>

虽然这可能比 v-show 的性能略高，因为不必将第二个非显示元素添加到 DOM，但差异可能可以忽略不计。

Answer 2

更好的方法是删除 v-if 并使用计算

将不同的值发送到 icon prop

<my-icon :icon="getIcon"></my-icon>

export default {
 computed: {
  getIcon() {
   return isPlaying?'pause':'play':
  }
 }
}

通过上面的方法，在template段

只需要一小行代码，就可以根据不同的条件发送任意值

Vue.js ternary expression vs v-show