這篇來說明剩下的比對、提示、重來功能。

重來

很簡單，只有重新reload而已。

      re(){
        window.location.reload();
      }

比對、提示

當輸入格式正確時，就會進入比對function。
讓judgecount+1紀錄你猜的次數。
寫兩個for迴圈來判斷AB，當兩陣列同位置的值一樣時，將該位置紀錄到a陣列，並在此做勝利判斷，由於這雙層迴圈會執行16次，所以當wincount等於16時就是猜中了，若兩陣列不同位置的值一樣時，將該位置紀錄到b陣列。

        this.judgecount++
        for(var i = 0;i<4;i++){
          for(var j = 0;j<4;j++){
              if(this.winnum[i]==this.stringarray[i]){
                this.a.push(i+1)
                this.wincount++;
                if(this.wincount == 16){
                  this.win = true 
                }
              }
              else if((this.winnum[i]==this.stringarray[j])&&(this.winnum[i]!=this.stringarray[i])){
                this.b.push(j+1)
              }
          }
        }

this.a在紀錄位置資料時會有重覆值，我們要將重覆值去除。

        this.filtera = this.a.filter(function(element, index, arr){
          return arr.indexOf(element) === index;
        });

確認了AB位置後，要做提示功能，將filtera和b存放AB位置資訊，acount和bcount紀錄filtera和b長度，跟stringarray結合起來，就能做出提示資訊。

        for(var i = 0;i<this.acount;i++){
          this.atip.push(this.stringarray[(this.filtera[i]-1)])
        }
        for(var i = 0;i<this.bcount;i++){
          this.btip.push(this.stringarray[(this.b[i]-1)])
        }

之後將提示資訊和你猜的數字放到history陣列裡，用v-for顯示你猜數字的歷史紀錄。

        this.history.push({
          num1:this.stringarray[0],
          num2:this.stringarray[1],
          num3:this.stringarray[2],
          num4:this.stringarray[3],
          ab:this.acount+"A"+this.bcount+"B",
          tipa:"A是:"+this.atip,
          tipb:"B是:"+this.btip
        })

最後將提示、位置陣列和勝利條件清空歸零，才不會影響下次的判斷。

        this.atip =[]
        this.btip =[]
        this.a =[]
        this.b =[]
        this.wincount = 0  

這樣猜數字遊戲就完成了。
以下是全程式碼:

<template>
  <div >
    <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>
  </div>
</template> 
<script>
// @ is an alias to /src
/*eslint-disable*/
export default {
  name:"guessnumber",
  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
      },
  },
  watch:{
        youguessnumber:{
            immediate:false,
            handler(){
                this.youguessnumber=this.youguessnumber.replace(/[^\d]/g,'')
            }
            },
  },
  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)
    }
  },
  methods:{
      send(){
        if((this.youguessnumber.length == 4)){
            this.error = false;
            this.judge()
            this.youguessnumber = ""
        }
        else{
            this.error = true;
            this.youguessnumber = ""
        }
      },
      judge(){
        this.judgecount++
        for(var i = 0;i<4;i++){
          for(var j = 0;j<4;j++){
              if(this.winnum[i]==this.stringarray[i]){
                this.a.push(i+1)
                this.wincount++;
                if(this.wincount == 16){
                  this.win = true 
                }
              }
              else if((this.winnum[i]==this.stringarray[j])&&(this.winnum[i]!=this.stringarray[i])){
                this.b.push(j+1)
              }
          }
        }

        this.filtera = this.a.filter(function(element, index, arr){
          return arr.indexOf(element) === index;
        });
        for(var i = 0;i<this.acount;i++){
          this.atip.push(this.stringarray[(this.filtera[i]-1)])
        }
        for(var i = 0;i<this.bcount;i++){
          this.btip.push(this.stringarray[(this.b[i]-1)])
        }

        this.history.push({
          num1:this.stringarray[0],
          num2:this.stringarray[1],
          num3:this.stringarray[2],
          num4:this.stringarray[3],
          ab:this.acount+"A"+this.bcount+"B",
          tipa:"A是:"+this.atip,
          tipb:"B是:"+this.btip
        })
        this.atip =[]
        this.btip =[]
        this.a =[]
        this.b =[]
        this.wincount = 0  
      },
      re(){
        window.location.reload();
      }
  }
}
</script>
<style scoped>
</style>