Hide Div based on value of props-CodePudding

I have imported props from my parent.vue. Now I want to hide my div based on the number in my Object.

If my props number is empty or 0 i want to hide this Div, if it is bigger or equal than 1 I want to show it.

Here is how my object looks like which I get from my methods:

my template:

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

my script:

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

props: [
  "number"
  ]

CodePudding user response：

You can use v-if or 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>