【uniapp】小程序简单的登录授权了解v-if与v-else使用

举例：调用一下

uni.getUserProfile(OBJECT)

获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。

uni.getUserProfile({
						desc: "获取你的昵称、头像、地区及性别",
						success: resa => {
							console.log('ress',resa)
							setStorage('userinfo',resa.userInfo)
							uni.navigateBack({
							delta: 1 //返回上一页
							})
						},

跳回个人中心，onshow时拿到放在缓存中的userInfo信息

data(){
			return{
				//拿到用户信息
				userinfo: '',
			}
		},
	
onShow() {
			let userinfo = getStorage("userinfo")
			if(userinfo == ''){
				console.log("为空时传空图标");
			}else{
				console.log("正常时显示头像");
				this.userinfo = userinfo
			}
			console.log("----------拿到session中的信息");
			console.log(userinfo);
			this.userinfo = userinfo
		},

原来没有登录时肯定要用空头像占位，用户名位置用【点击登录】等字符作为提醒。

可以在data中存两个变量img与nickname当读到缓存中的userInfo为空时就把图片未登录空头像图片传过去，有东西时正常传接收到的。这里使用v-if与v-else来处理：

<template>  
  <!-- userinfo为空时展示未登录 -->
			<view v-if="!userinfo">
                //空头像图片
				<view class="my_head_picture">
				<image src="../../static/image/user_image.png" mode="aspectFit"
                 @click="jumpPage('login')"></image>
				</view>

				<view class="my_name">
					<text>点击登录</text>
				</view>

			</view>

            //不为空时走这个分支
			<view v-else>
                    //展示传过来的头像  注意这里的src写法 使用v-bind绑定src
				<view class="my_head_picture">
					<image :src="userinfo.avatarUrl" mode="aspectFit"></image>
				</view>
                    //直接展示传过来的用户名
				<view class="my_name">
					{{userinfo.nickName}}
				</view>

			</view>

</template>

export default {
		data() {
			return {
				//拿到用户信息
				userinfo: '',
			}
		},
        onShow() {
			let userinfo = getStorage("userinfo")
			this.userinfo = userinfo
		},
		methods: {
        jumpPage(path) {
				console.log(path)
				uni.navigateTo({
					url: '../' + path + '/' + path
				})
			},

        }