根据道具的价值隐藏Div

Posted 2023-02-16

【中文标题】根据道具的价值隐藏Div

【英文标题】：Hide Div based on value of props

【发布时间】：2021-11-24 14:59:46

【问题描述】：

我从我的parent.vue 导入了道具。现在我想根据我的对象中的数字隐藏我的 div。

如果我的道具编号为空或0我想隐藏这个Div，如果它大于或等于1我想显示它。

这是我从方法中得到的对象的样子：

我的模板：

<template>
  <div class='row mb-5'> <!-- HIDE THIS COMPLETE DIV -->
    <div class='col-12'>   
    </div>
  </div>
</template>

我的脚本：

data: function() 
    var data =  
      checkNumber: this.number,
    
    console.log(data);
    return data;
  ,

props: [
  "number"
  ]

【参考方案1】：

您可以使用v-if 或v-show：

Vue.component('Child', 
  template: `
    <div class='row mb-5' v-if="Number(number) > 0"> 
      <div class='col-12'> 
      number > 0
      </div>
    </div>
  `,
  data() 
    return  
      checkNumber: this.number,
    
  ,
  props: [
    "number"
  ]
)

new Vue(
  el: '#demo',
  data() 
    return  
      numbers: 0,
    
  ,
)

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <input type="number" v-model="numbers" />
  <Child :number="numbers" />
</div>