使用svg顯示加載種提示界面
這裡不能給svg那個ul用v-for="(shop, index) in shops”，我們的目的是為了在沒擷取到資料的時候，界面這樣顯示，用了就都不能顯示，是以 v-for="items in 6"需要這樣，
評論星星
這裡shop.rating是擷取到的評分 ，size星星大小 ，Number也需要強制綁定哦
就是根據評分這個條件來進行一系列操作，建立個數組，往裡面放class會用到on，half，off，它們對應着星星的形狀
//ShopList
<Star :score="shop.rating" :size="24"></Star>
//Star
<template>
<div class="star" :class="'star-'+size">
<span class="star-item " v-for="(sc, index) in starClasses" :class="sc" :key="index"></span>
</div>
</template>
<script>
//類名常量 這裡'on'不可以寫成on，因為class名字是常量
const CLASS_ON = 'on'
const CLASS_HALF = 'half'
const CLASS_OFF = 'off'
export default {
props:{
score:Number, //分數
size:Number //星星大小
},
computed:{
/*
3.2: 3 + 0 + 2
3.5: 3 + 1 + 2
*/
starClasses(){
const {score} = this
const scs = []
//向scs中添加n個CLASS_ON
//floor() 方法傳回小于等于x的最大整數
const scoreInteger = Math.floor(score)
for (let i = 0; i < scoreInteger; i++){
scs.push(CLASS_ON)
}
//向scs中添加0/1個 CLASS_HALF
//這裡小數計算是不太準确的，是以*10
if(score*10-scoreInteger*10>=5){
scs.push(CLASS_HALF)
}
//向scs中添加n個CLASS_OFF
// for (let i = 0; i < 5 - scoreInteger; i++){
// scs.push(CLASS_OFF)
// }也可以
while(scs.length<5){
scs.push(CLASS_OFF)
}
return scs
}
}
}
</script>
登入界面的切換與手機驗證
記得要用計算屬性就很簡單了
<div class="login_content">
<form>
<div :class="{on:loginWay}">
<section class="login_message">
<input type="tel" maxlength="11" placeholder="手機号" v-model="phone">
<button disabled="disabled" class="get_verification" :class="{right_phone:rightPhone}">擷取驗證碼</button>
<script>
export default {
data(){
return{
loginWay:true,//true代表短信登入，false代表密碼
phone:'',//手機号
}
},
computed:{
rightPhone(){
//test() 方法用于檢測一個字元串是否比對某個模式.
return /^1\d{10}$/.test(this.phone)
}
}
}
</script>
實作倒計時
:disabled指為false才是可以點選
點選表單中任何按鈕都相當于送出表單，是以要阻止預設行為@click.prevent
注意定時器的問題，倒計時時點選不讓它再開啟一個定時器了，這裡還可以把它們放在if(!this.computeTime)裡，都可以
<button :disabled="!rightPhone" class="get_verification"
:class="{right_phone:rightPhone}" @click.prevent="getCode">
{{computeTime>0 ? `已發送(${computeTime}s)` : '擷取驗證碼'}}
</button>
<script>
export default {
data(){
return{
loginWay:true,//true代表短信登入，false代表密碼
phone:'',//手機号
computeTime:0,
click:false
}
},
computed:{
rightPhone(){
//test() 方法用于檢測一個字元串是否比對某個模式.
return /^1\d{10}$/.test(this.phone)
}
},
methods:{
getCode(){
if (this.click) {
return
}
this.click=true
//啟動倒計時
this.computeTime = 30
const intervalId = setInterval(() => {
this.computeTime--
if(this.computeTime<=0){
this.click = false
clearInterval(intervalId)
}
},1000)
//發送ajax請求（向指定手機号發送驗證碼短信）
}
}
}
</script>
切換密碼的顯示隐藏
這裡就是顯示隐藏一些class
設定兩個input
<section class="login_verification">
<input type="text" maxlength="8" placeholder="密碼"v-if="showPsw" v-model="pwd">
<input type="password" maxlength="8" placeholder="密碼" v-else v-model="pwd">
<div class="switch_button" :class="showPsw? 'on':'off'" @click="showPsw=!showPsw">
<div class="switch_circle" :class="{right:showPsw}"></div>
<span class="switch_text">{{showPsw?'abc':''}}</span>
</div>
</section>
data(){
return{
loginWay:true,//true代表短信登入，false代表密碼
phone:'',//手機号
computeTime:0,
click:false,
showPsw:false,//是否顯示密碼
pwd:''
}
},