我有一个返回如下子对象的数据,因此this.children将返回如下:
{
"1": {
"firstName": "JJJ",
"lastName": "B",
"day": "1",
"month": "1",
"year": 2012,
"name": "JJJ B",
"dateOfBirth": "2012-01-01",
"age": 6,
"id": "1"
},
"2": {
"firstName": "KKK",
"lastName": "B",
"day": "2",
"month": "2",
"year": 2004,
"name": "KKK B",
"dateOfBirth": "2004-02-02",
"age": 14,
"id": "2"
},
"3": {
"firstName": "LLL",
"lastName": "B",
"day": "3",
"month": "3",
"year": 2017,
"name": "LLL B",
"dateOfBirth": "2017-03-03",
"age": 1,
"id": "3"
}
}
如果该列表中孩子的年龄在3岁以下,我想制作一个返回true或false的函数。vue非常陌生。我了解使用v-for时如何检索年龄,但不确定在涉及检查对象值时如何继续使用vue函数。
感谢您的帮助。
答案 0 :(得分:1)
就做
<ul v-for="child in getChildrenUnder3 "><li>{{child.age<3}}</li></ul>
或者您可以使用计算出的属性:
computed:{
getChildrenUnder3(){
let children3=[];
for(let i=0;i<Object.keys(this.childList).length;i++){
if(Object.values(this.childList)[i].age<3){
children3.push(Object.values(this.childList)[i])
}
}
return children3;
}
}
并像这样渲染它:
<ul v-for="child in getChildrenUnder3 "><li>{{child.age}}</li></ul>
答案 1 :(得分:0)
只需将函数放在模板中
<template>
<div v-for="child in children" :key="child.id">
{{child.firstName}} is less than three: {{child.age < 3 ? 'TRUE' : 'FALSE'}}
</div>
</template>
但是,如果您试图找出每个孩子的年龄是否小于3,则可以使用计算值来检索此数据
minAge
应该返回找到的最低年龄
computed: {
minAge() {
return Math.min(Object.keys(this.children).map(k => {
this.children[k].age;
}))
}
}
然后您可以使用它在模板中生成布尔值,例如{{minAge<3}}