uniapp开发10-v-show和v-if的简单使用案例注意事项

uniapp开发10-v-show和v-if的简单使用案例注意事项！首先就声明:v-if是会触发dom树结构的重新构建！也就是说，条件如果不成立！那么dom树结构内是不会创建该元素的！但是，v-show就是借助于css样式display:none;这种设置！来实现一个隐藏元素的效果。dom里面是有该元素的！

声明2：为了提升页面的效率，大家可以根据情况，酌情考虑，到底要不要使用v-show。v-if会增加cpu的计算量。虽然很小！

---

1：代码：

<template>
	<view>
		<h2>关于我们</h2>
		<view v-if="userInfo.role==0">
			欢迎<text class="roleInfo">尊贵的钻石会员</text>
			<text class="userInfoName">{{userInfo.name}}</text>
			登录管理后台
		</view>
		<view v-else>
			欢迎普通会员登录管理后台
		</view>
		<view v-show="state">
			会员有效期内
		</view>
		<view v-show="!state">
			会员已到期
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					"name":"老李",
					"role":4,
					"slary":12000,
					"birthday":"1995-05-06"
				},
				state:false,
			};
		}
	}
</script>

<style lang="scss">
	.userInfoName{
		font-size: 16px;
		color: #ff007f;
	}
	.roleInfo{
		font-size: 14px;
		color:#23aa0b;
	}
</style>

---

2：效果展示，目前这个用户的角色值是4，代表是一个普通会员。

如图所示，代码识别成功！且提示会员到期！

我们改成角色值为0，即可触发钻石会员的特效展示 效果。

如图所示，角色改变了，量身定制的特效效果也跟着展示渲染成功了。