vue 小知识

图片:

1、img 的路径

<img :src="item.src"/>

2、背景图片的路径

v-bind:style="{backgroundImage: 'url(' + item.cover + ')'}"

3、判断

<p v-if="item>0"></p>

4、a链接

<router-link :to="{ name: 'store/record', params: { page: 1}}"></router-link>

this.$router.push({name: 'store/record', params: { page: 1}})

5、跳下载页

var host = window.location.host;

var protocal = window.location.protocol

window.location.href = protocal+'//'+host+'/wap/download/index'

6、获取url 参数

a:?传参方式

http://localhost:3333/#/index?id=001

this.$route.query.id

b:路由配置传参方式

在配置路由时 例如 "/firewall/authorize/:uid/:uname/:token"

页面url为 http://XXX.com/firewall/authorize/23/zhangman/232454

js 接收方式 this.$route.params.uid

7、滚动加载

//是否返回底部

// 设置一个开关来避免重负请求数据

mounted(){

_this.sw = true;

window.addEventListener('scroll',function() {
    _this.isTouchScreenBtm()
})
}

isTouchScreenBtm:function(){
    //document.body.scrollTop 滚动条距离顶部的距离(IE9 及更早版本)//pageYOffset
    //window.innerHeight可视区的高度
    //document.body.offsetHeight 内容的总高度
    if (window.pageYOffset + window.innerHeight >= document.body.offsetHeight) {
        let _this=this
        if (_this.sw == true) {
            // 将开关关闭
            _this.sw = false
            //TODO:: 需要判断tab切换获取数据
            _this.initData()
        }
    }
},