登录后的跳转页面(v-if的用法)

默认跳转到index.vue里面

home是一个组件

<home :cur="PageCur" v-if="PageCur == 'home'"></home>

• 这里面用到了一个v-if指令,用与条件性的渲染块内容，这块内容只会在指令的表达式返回true值时被渲染。
• 若想<home></home>里面的内容被渲染，需要PageCur == 'home'为真；
• 怎么判断PageCur，在home组件上给他绑定这个PageCur，来判断；
• 在默认情况下, PageCur: 'home',

data() {
  return {
   PageCur: 'home',
	}
      },

• onload事件当页面或图像加载完毕后立即执行；

onLoad: function() {
  this.PageCur = 'home'
		},

小总结

• 就是页面默认加载时就会执行home页面；

底部导航栏

底部导航栏的外层样式

<view class="cu-bar tabbar bg-white shadow foot">

</view>

• 导航栏里的项目，给他加对应规则

<view :class="PageCur=='home'?'action text-green':'action text-gray'"
@click="NavChange" data-cur="home">
    <view class='cuIcon-homefill'></view>主页
</view>

• 给这个外层大view加一个class，如果PageCur=='home'为真，那么里面的内容的样式就是green，否则就是灰色；
• 给这个view加一个click事件，当点击click时就会触发NavChange函数；
• 这个NavChange函数如下:

methods: {
	NavChange: function(e) {
	this.PageCur = e.currentTarget.dataset.cur
			}
		}

• NavChange是一个函数，
  • 当在浏览器点击的时候，点击的那个内容里面有很多东西，里面就有我需要的；
  • 所以让浏览器传一个点击后的参数给我，这个参数可以是e，也可以是其他的内容；
  • 我们需要的就是他的数据e.currentTarget.dataset.cur;