vue雜項

<div @click="showSlide=true"></div>

<div :class="{'slide':showSlide}"></div>

let id=this.$route.params.id;

this.axios.get(`/products/${id}`).then((res)=>{

})

this.$router.push(`/products/${id}`)

//字符串模板 有動態值時可以使用

`/products/${id}`

<div :class="{'checked':version==1}" @click="version=1"></div>

this.list = res.list || [] ;

if(/^1\d{10}/.test(mobile)) //正則

簡單的動畫用transiton來處理 transiton:all .5s

複雜的用annimation

.icon-down{
    transiton:all .5s
    &.up{
        transform:rotate(180deg)    
   }
}

//可以有兩個class 一個是動態綁定的
<div class="pay" :class="{'checked':payType==1}" @click="payType=1"></div>

//綁定slot name爲tip
<div v-slot:tip></div>

window.open('/#/order/alipay?orderId='+this.orderNo,'_blank')

//支付寶支付
//v-html 賦值html代碼
<div class="form" v-html="content"></div>

//支付寶支付 先調接口 獲取html表單代表 賦值到content,1秒後提交表單
paySubmit(){
    this.axiox.post('/pay',{
        orderId:this.orderId
    }).then((res)=>{{
        this.content = res.content ;
        setTimeout(()=>{
            document.form[0].submit();
        },100)
    })
}

//插件中心
https://www.npmjs.com

前端插件
QRCode 轉成二維碼

//只有一個屬性時
props:["img"]
//多個屬性
props:{
    propa:Number,
    propb:{
        type:String,
        required:true
        default:100
    }
}

setTimeout 只會調一次
setInterval 會一直調，除非手動取消
setInterval 一定要調clearInterval來清除，不然會一直在執行

//1000 1秒
this.T = setInterval(()=>{
    //調接口
    if(){
        //清除定時器
        clearInterval(this.T)
    }
},1000);

data(){
    return {
    }
},
method:{

}