vue根据数据判断显示和隐藏。
tableData第一个没有数据，view怎么判断第一个为空时view不显示？
同样第三个iphone为空，那手机就不显示，应该怎么判断？
<template>
<view>
<view v-for="(item,index) in tableData" :key="item">
<span>名称：{{item.name}}span>
<span>手机：{{item.iphone}}span>
<image src="../../static/tab/my.png">image>
view>
view>
template>
<script>
export default {
data() {
return {
tableData:[
{},
{
name:"abc",
iphone : "12"
},
{
name:"abc",
iphone : ""
}
]
};
},
};
script>
<style>
style>
<template>
<view>
<view v-for="(item,index) in tableData" :key="item">
<view v-if="JSON.stringify(item) != '{}'">
<span>名称：{{item.name}}</span>
<span v-if="item.iphone">手机：{{item.iphone}}</span>
<image src="../../static/tab/my.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tableData:[
{},
{
name:"abc",
iphone : "12"
},
{
name:"abc",
iphone : ""
}
]
};
},
};
</script>
<style>
</style>
v-for和v-if不能用在同一个标签上，这样的话好像只能在给this.tabelData赋值前遍历数据把空值从数组删除再赋值给this.tableData
只能加 v-if 了 view 上加 v-if="item!="{}" 手机 span 加上 v-if="'item.phone!=''"
<view v-for="(item,index) in tableData.filter(item=>{
return item.name
})" :key="item">
<span>名称：{{item.name}}</span>
<span v-if="item.phone">手机：{{item.iphone}}</span>
<image src="../../static/tab/my.png"></image>
</view>
这样试试
不知道你这个问题是否已经解决, 如果还没有解决的话: