javascript - 根据道具的价值隐藏Div
问题描述
我已经从我的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"
]
解决方案
您可以使用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>
推荐阅读
- c++ - PyTorch C++ 将数据转换为张量失败
- nginx - 负载均衡的服务器架构
- c++ - 如何遍历 cpp 中函数返回的 char 指针数组
- android - 如何通过 Google Play 商店获取带有应用签名密钥的 apk?
- c# - 我如何获得过去 4 周的周数 C#
- ios - SwiftUI:EditButton 在嵌入 HStack 部分标题时不会触发 onDelete
- matlab - 如何确定在 Octave 中引起警告的位置?
- reactjs - 无法迭代作为道具传递给 React js 子组件的数组
- ios - SwiftUI:如何让滚动视图包含完整列表长度
- python - Python Decimal 不接受 getcontext() 精度修改