這次來做一個簡單的猜數字遊戲，我們先把它分成基礎畫面data、數字生成、輸入限制和轉換、數字比對、提示和重來這七個部分。

基礎畫面

先做好一個input輸入欄位記得要v-model變數名稱，再做三個按鈕v-on:function分別用來送出數字功能、提示功能、重來功能。

之後再做兩個h1標籤，並用v-if控制用來在輸入錯誤和猜對時顯示。

最後再新增一個div用v-for放入陣列，用來顯示你之前所猜數字的歷史紀錄。

    <div class="container">
      <div class="row">
        <div class="col-4">
        </div>
        <div class="col-4">
          <p>叫你猜:(4個數字)<input type="text" v-model="youguessnumber"></p>
          <button class="btn btn-danger" @click="send">猜下去</button>
          <button class="btn btn-dark" @click="showtip=(!showtip)">提示</button>
          <button class="btn btn-info" @click="re">重來</button>
        </div>
        <div class="col-4">
        </div>
      </div>
        <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
            <h1 v-if="error">不要亂猜</h1>
            <h1 v-if="win">你猜對了 共花了{{judgecount}}次</h1>
        </div>
        <div class="col-2"></div>
      </div>
      <div class="row"  v-for="(item,index) in history" :key="index"> 
          <div class="col-2"></div>
          <div class="col-1">{{item.num1}}</div>
          <div class="col-1">{{item.num2}}</div>
          <div class="col-1">{{item.num3}}</div>
          <div class="col-1">{{item.num4}}</div>
          <div class="col-1">{{item.ab}}</div>
          <div class="col-2" v-if="showtip">{{item.tipa}}</div>
          <div class="col-2" v-if="showtip">{{item.tipb}}</div>
          <div class="col-1"></div>
      </div>
    </div>

做完畫面後，要在data和computed添加會用到的變數。

  data:()=>({
     youguessnumber:null,//你所猜的數字
     winnum:[],//正確數字
     randomnum:"",//亂數生成
     wincount:0,//判斷勝利條件值
     a:[],//紀錄A的位置
     b:[],//紀錄B的位置
     history:[//歷史紀錄
       {num1:"",num2:"",num3:"",num4:"",ab:"",tipa:"",tipb:""}
     ],
     judgecount:0,//你猜了幾次才猜到
     filtera:[],//將紀錄A的位置之陣列重覆值去除
     atip:[],//紀錄A的提示
     btip:[],//紀錄B的提示
     filterbtip:[],//將紀錄B的提示之陣列重覆值去除
     showtip:false,//控制提示畫面是否顯示
     error:false,//控制錯誤畫面是否顯示
     win:false,//控制猜對畫面是否顯示
  }),
  computed:{
      stringarray(){//將你猜的數字轉陣列
          return this.youguessnumber.split("")
      },
      acount(){//紀錄A的位置之陣列長度
          return this.filtera.length
      },
      bcount(){//紀錄B的位置之陣列長度
          return this.b.length
      },
  },

數字生成

接著生成我們要猜的數字，在created生命週期裡，寫一個4次的for迴圈，裡面用Math.floor(小於等於所給數字的最大整數)和Math.random來生成0到9的整數再新增到陣列裡，為了預防有重覆數字的問題，還需要再寫一個while判斷陣列是否已有該數字，若有則再random。

  created(){
    for(var i = 0;i<4;i++){
      this.randomnum = Math.floor(Math.random() * 10).toString()
      while(this.winnum.indexOf(this.randomnum)!=-1){
        this.randomnum = Math.floor(Math.random() * 10).toString()
      }
      this.winnum.push(this.randomnum)
    }
  },

輸入限制和轉換

我們要確保輸入的值皆為數字且長度皆為4。

先再watch裡監聽你v-model的變數，並用replace將除數字之外的值替換為空值，這樣你就不能輸入除數字之外的值了。

  watch:{
        youguessnumber:{
            immediate:false,
            handler(){
                this.youguessnumber=this.youguessnumber.replace(/[^\d]/g,'')
            }
            },
  },

接著做長度判斷，在function裡用length判斷長度，若等於4則將兩陣列做比對，比對完後清空輸入欄位的值，再將控制錯誤訊息的data改成false;若不等於4，將控制錯誤訊息的data改成true再清空輸入欄位的值。

      send(){
        if((this.youguessnumber.length == 4)){
            this.error = false;
            this.judge()
            this.youguessnumber = ""
        }
        else{
            this.error = true;
            this.youguessnumber = ""
        }
      },

剩下的部分會在下一篇說明。