Vue如何根据props传入的number属性值控制对应div的显隐状态

解决方案 #

你可以通过Vue内置的v-if或者v-show指令实现需求，两者区别如下：

• v-if：满足条件才会渲染DOM节点，不满足时节点直接不存在，适合切换频率低的场景
• v-show：无论是否满足条件都会渲染DOM节点，通过display: none控制显隐，适合切换频率高的场景

1. 修改template代码 #

直接在需要控制显隐的div上添加指令即可，不需要额外定义data变量就能直接使用props传入的number：

<template>
  <div class='row mb-5' v-if="Number(number) >= 1"> <!-- 满足条件才渲染该div -->
    <div class='col-12'>   
    </div>
  </div>
</template>

这里用Number()做类型转换是为了避免传入的number是字符串格式的数字（比如"1"）导致判断失效，空值、空字符串、0转换后都是0，刚好符合你隐藏的条件。

2. 可选script优化 #

你当前代码里把props的number赋值给了data里的checkNumber，如果没有额外修改这个值的需求，完全可以删掉这个data变量，直接使用props的number即可；如果需要后续修改这个值不影响父组件，也可以保留，对应指令改成v-if="Number(checkNumber) >= 1"即可。
修改后的最简script代码：

export default {
  props: [
    "number"
  ]
  // 不需要额外的data变量
}

内容的提问来源于stack exchange，提问作者user16365685