最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

 
 
 
 

  
  
  
  
import prompt from '@system.prompt'; 
  
  
  
  
export default { 
  
  
  
  
    data: { 
  
  
  
  
        title: 'World', 
  
  
  
  
        num:1, 
  
  
  
  
    }, 
  
  
  
  
    addnum(){ 
  
  
  
  
        ++this.num; 
  
  
  
  
    }, 
  
  
  
  
    reducenum(){ 
  
  
  
  
        if(this.num>1){ 
  
  
  
  
            --this.num; 
  
  
  
  
        } 
  
  
  
  
        else{ 
  
  
  
  
            prompt.showToast({ 
  
  
  
  
                message:"對不起,商品至少為一件", 
  
  
  
  
                duration:5000, 
  
  
  
  
            }) 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 
 

   
 
 
 

    
  
  
  
 
    
  
  
  
   
    
  
  
  
      - 
    
  
  
  
           
    
  
  
  
      + 
    
  
  
  
  

 5.css屬性設置:

 
 
 
 

  
  
  
  
.container { 
  
  
  
  
    width: 100%; 
  
  
  
  
    height:1200px; 
  
  
  
  
    display: flex; 
  
  
  
  
    justify-content: center; 
  
  
  
  
    align-items: center; 
  
  
  
  
} 
  
  
  
  
.countview{ 
  
  
  
  
    width: 300px; 
  
  
  
  
    height: 120px; 
  
  
  
  
    /**border: 3px solid red;**/ 
  
  
  
  
    display: flex; 
  
  
  
  
    justify-content: center; 
  
  
  
  
    align-items: center; 
  
  
  
  
   border-radius: 100px; 
  
  
  
  
} 
  
  
  
  
.tv1{ 
  
  
  
  
    width: 70px; 
  
  
  
  
    height: 70px; 
  
  
  
  
    font-size: 60px; 
  
  
  
  
    font-weight: bold; 
  
  
  
  
    text-align: center; 
  
  
  
  
    border:3px solid darkgray; 
  
  
  
  
    border-radius: 35px; 
  
  
  
  
    background-color: white; 
  
  
  
  
    color:darkgrey ; 
  
  
  
  
} 
  
  
  
  
.tv2{ 
  
  
  
  
    width: 70px; 
  
  
  
  
    height: 70px; 
  
  
  
  
    font-size: 50px; 
  
  
  
  
    font-weight: bold; 
  
  
  
  
    text-align: center; 
  
  
  
  
    border:4px solid #FFB964; 
  
  
  
  
    border-radius: 35px; 
  
  
  
  
    background-color: #FFB964; 
  
  
  
  
    color: white; 
  
  
  
  
} 
  
  
  
  
.inputview{ 
  
  
  
  
    width: 200px; 
  
  
  
  
    height: 100%; 
  
  
  
  
    background-color: white; 
  
  
  
  
    font-weight: bold; 
  
  
  
  
    font-size: 50px; 
  
  
  
  
    margin-left: 30px; 
  
  
  
  
} 
 
 
 
 

 6.效果呈現(xiàn):

這里用到的 input 的type屬性的文本字段和密碼字段.利用這兩個可以制作一個登錄頁面。

大家都知道在點擊輸入框時光標會閃爍,也即是需要獲取焦點.而獲取焦點的事件是 onfocus.取消焦點事件為onblur. 當我們點擊input的父容器時就獲得焦點,也就可以輸入字段,為了更直觀的看到獲取焦點成功,我設置了圖標的顏色,未獲取時圖標為灰色,獲取成功后為紅色.如下圖：

placeholder是用戶名密碼框未輸入內(nèi)容時,默認顯示的灰色文字。當未輸入字段時顯示，當在輸入字段獲得焦點時消失。

js業(yè)務邏輯層:

 
 
 
 

  
  
  
  
export default { 
  
  
  
  
    data: { 
  
  
  
  
        title: 'World', 
  
  
  
  
        flag:false, 
  
  
  
  
    }, 
  
  
  
  
    click(){ 
  
  
  
  
        this.flag=true; 
  
  
  
  
    }, 
  
  
  
  
    click1(){ 
  
  
  
  
        this.flag=false; 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 
 

 視圖層: