图图的学习计划3.18
LeetCode每日一题
题目：给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。
请你找出这两个有序数组的中位数，并且要求算法的时间复杂度为 O(log(m + n))。
你可以假设 nums1 和 nums2 不会同时为空。
示例 1:
nums1 = [1, 3]
nums2 = [2]
则中位数是 2.0
示例 2:
nums1 = [1, 2]
nums2 = [3, 4]
则中位数是 (2 + 3)/2 = 2.5
/**1. @param {number[]} nums12. @param {number[]} nums23. @return {number}*/
var findMedianSortedArrays = function(nums1, nums2) {let nums3 = nums1.concat(nums2).sort((a,b)=>a-b);let length = nums3.length;return (length%2 == 0) ? (nums3[length/2-1] + nums3[length/2])/2 : nums3[Math.floor(length/2)]
};
解题思路：
将两个数组拼接排序，合并数组的长度并进行排序。然后判断数组长度的奇偶，如果为奇数则将长度除以2并向下取整该索引所在的值就是中位数，如果是偶数则中位数就为该长度一半所在的数和它的前一个数相加除以2。
VUE学习
vue-router传递参数
- 利用param传递参数：
//绑定参数：
{path: '/user/:userId', component: User
}
//获取：
<h1>获取过来的userId为：{{this.$route.params.userId}}</h1>
- 利用query传递参数：
<button @click="proBtn">我的</button>
//点击方法proBtn () {this.$router.push({path: '/more/pro',query: this.obj})}//通过query获取对象<p>{{this.$route.query}}</p>
router与route的区别
router对象为：
Vue.use(VueRouter)export default new VueRouter({routes: [{path: '/home', component: Home},{path: '/', redirect: '/home'},{path: '/more',component: More,children: [{path: 'news', component: News},{path: 'message', component: Message},{path: '',redirect: 'news'},{path: 'pro', component: Profile}]},{path: '/user/:userId', component: User}],mode: 'history',linkActiveClass: 'active'
})
route对象是当前路由的对象
守卫导航
如通过路由进入不同界面是需改变页面title的值
//在route对象里加入meta属性
{path: '/home',component: Home,meta: {title: '首页'}
}
//通过beforeEach方法 一定要调用next()方法
router.beforeEach((to, from, next) => {document.title = to.matched[0].meta.titlenext()
})
keep-alive
可以缓存组件
<keep-alive><router-view/>
</keep-alive>
//可以使用activated方法处理该组件活跃时所作的事务
export default {name: 'Message',created () {console.log('create')},activated () {console.log('activated')},beforeRouteLeave (to, from, next) {console.log('leave')next()},destroyed () {console.log('destroyed')}
}
keep-alive的属性include与exclude
自定义TagBar的实现
封装了一个TagBar组件
整体的一个TagBar
<template><div id="tagbar"><slot></slot>//用插槽来实现灵活的要求</div>
</template><script>export default {name: 'Tagbar'
}
</script><style scoped>#tagbar{display: flex;height: 49px;position: fixed;bottom: 0;left: 0;right: 0;background: #f6f6f6;font-size: 12px;}
</style>>
每个单独小个的TagBarItem
<template><div class="tagitem" @click="itemBtn"><slot v-if="!isActive" name="tagimg"></slot> //用来存放为活跃的图片<slot v-else name="activeimg"></slot>//用来存放活跃的图片<div :style="activeStyle">//用来绑定自定义活跃的字体颜色<slot name="tagtext"></slot>//用来存放文字</div></div>
</template><script>
export default {name: 'Tagbaritem',props: {path: String,//存放路由的地址textStyle: { //用来存放传递过来的字体颜色type: String,default: 'red'}},methods: {itemBtn () {this.$router.replace(this.path) //路由跳转}},computed: {isActive () {//判断是否活跃return this.$route.path.indexOf(this.path) !== -1},activeStyle () {//用来设置自定义颜色return this.isActive ? {color: this.textStyle} : {}}}
}
</script><style scoped>.tagitem{flex: 1;text-align: center;}.tagitem img{margin-top: 6px;width: 20px;height: 20px;}.tagitem p{margin-top: 0;margin-bottom: 0px;}
</style>在App.vue
<template><div id="app"><router-view/><tagbar><tagbaritem path="/home"><img slot="tagimg" src="./assets/img/home.png" alt=""><img slot="activeimg" src="./assets/img/active.png" alt=""><p slot="tagtext">首页</p></tagbaritem><tagbaritem path="/cart"><img slot="tagimg" src="./assets/img/home.png" alt=""><p slot="tagtext">购物车</p></tagbaritem><tagbaritem path="/message" textStyle="green"><img slot="tagimg" src="./assets/img/home.png" alt=""><p slot="tagtext">消息</p></tagbaritem><tagbaritem path="/pro"><img slot="tagimg" src="./assets/img/home.png" alt=""><p slot="tagtext">个人</p></tagbaritem></tagbar></div>
</template><script>
import tagbar from './components/tagbar/Tagbar'
import tagbaritem from './components/tagbar/Tagbaritem'export default {name: 'App',components: {tagbar,tagbaritem}
}
</script><style>
@import "./assets/css/base";
</style>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！