JavaScript中三元表达式的运用

JavaScript中三元表达式的运用

在实际的应用场景中，每个数组的每个字段中不是都有值的，当它没有值的时候，我们要进行页面渲染时，最好统一方式，这样体验效果最好。
当list数组中name为空的时候，可以显示未知；
当list数组中age为空的时候，可以显示不详；
当list数组中hobby为空的时候，可以显示暂无。
这里用三元表达式来进行展示，代码如下：

<template>
	<view class="content">
		<view class="nav" v-for="(item,index) in list" :key="index">
			<view class="">
				姓名：{{item.name?item.name:"未知"}}<!-- 当字段有值时，显示字段内容，反正显示未知 -->
			</view>
			<view class="">
				年龄：{{item.age?item.age:"不详"}}<!-- 当字段有值时，显示字段内容，反正显示不详 -->
			</view>
			<view class="">
				hobby：{{item.hob?item.hob:"暂无"}}<!-- 当字段有值时，显示字段内容，反正显示暂无 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				list:[
					{name:'',age:'',hob:''},
					{name:'尹浩宇',age:'17岁',hob:'爱好唱歌'},
					{name:'',age:'17岁',hob:'爱好穿不同颜色袜子'},
					{name:'biu',age:'17岁',hob:''},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 34rpx;
		box-sizing: border-box;
		background: #f7f7fc;
		.nav{
			width: 100%;
			background: #ff007f;
			padding-left: 50rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			text-align: left;
			font-size: 40rpx;
			margin: 30rpx 0;
			color: #ffffff;
		}
	}
</style>

效果图：