經過了前幾天的教學，相信大家對v-model、v-if 、 watch、computed有初步的理解，我們現在來做一個小東西，將它們都結合起來。

我們來做三個input欄位，可以判斷有無輸入，並顯示相應字串。

首先要先把data和computed值先設定好。

    data:()=>({
        id: '',//欄位data名稱
        pw: "",//欄位data名稱
        msg: "",//欄位data名稱
        account: 0//計算輸入欄位數量
    }),

    computed:{
        con1(){
            return this.id.length>0 //該欄位有值時為true
        },
        con2(){
            return this.pw.length>0 //該欄位有值時為true
        },
        con3(){
            return this.msg.length>0 //該欄位有值時為true
        },
    },

接著我們來做畫面，用到bootstrap來做排版，有3個輸入欄位和3個p標籤，輸入欄位都要v-model一個data值，p標籤都要用到v-if-else來做判斷，控制其是否顯示。

<div class="container">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-4">
            <input type="text" v-model="id">
            <br>
            <input type="text" v-model="pw">
            <br>
            <input type="text" v-model="msg">
            <br>
            <p v-if="account==3">都有輸入</p>
            <p v-else-if="account==2">只有二個輸入</p>
            <p v-else-if="account==1">只有一個輸入</p>
            <p v-else>都沒輸入</p>
        </div>
        <div class="col-4"></div>
    </div>
</div>

為了要能及時監聽輸入欄位的變動，會用到watch來監聽輸入欄位的data值。
當監聽到變動時都會執行check function。

watch: {
    id: {
        immediate: false,
        handler() {
            this.check();
        }
    },
    pw: {
        immediate: false,
        handler() {
            this.check();
        }
    },
    msg: {
        immediate: false,
        handler() {
            this.check();
        }
    }
},

check function用來判斷你的輸入欄有值時，藉由修改account值，控制p標籤的顯示時機。

methods: {
    check() {
        if (this.con1 && this.con2 && this.con3) {
            this.account = 3
        } else if ((this.con1 && this.con2) || (this.con1 && this.con3) || (this.con3 && this.con2)) {
            this.account = 2
        } else if (this.con1 || this.con2 || this.con3) {
            this.account = 1
        } else {
            this.account = 0
        }
    },
},

做完這些後就完成了。
以下是全程式碼。

<template>
  <div >
        <div class="container">
            <div class="row">
                <div class="col-4"></div>
                <div class="col-4">
                    <input type="text" v-model="id">
                    <br>
                    <input type="text" v-model="pw">
                    <br>
                    <input type="text" v-model="msg">
                    <br>
                    <p v-if="account==3">都有輸入</p>
                    <p v-else-if="account==2">只有二個輸入</p>
                    <p v-else-if="account==1">只有一個輸入</p>
                    <p v-else>都沒輸入</p>
                </div>
                <div class="col-4"></div>
            </div>
        </div>
  </div>
</template>
<script>
// @ is an alias to /src
/*eslint-disable*/
export default {
  name: '',
  components: {
  },
    data:()=>({
        id: '',//欄位data名稱
        pw: "",//欄位data名稱
        msg: "",//欄位data名稱
        account: 0//計算輸入欄位數量
    }),
    computed:{
        con1(){
            return this.id.length>0 //該欄位有值時為true
        },
        con2(){
            return this.pw.length>0 //該欄位有值時為true
        },
        con3(){
            return this.msg.length>0 //該欄位有值時為true
        },
    },
    watch: {
        id: {
            immediate: false,
            handler() {
                this.check();
            }
        },
        pw: {
            immediate: false,
            handler() {
                this.check();
            }
        },
        msg: {
            immediate: false,
            handler() {
                this.check();
            }
        }
    },
    methods: {
        check() {
            if (this.con1 && this.con2 && this.con3) {
                this.account = 3
            } else if ((this.con1 && this.con2) || (this.con1 && this.con3) || (this.con3 && this.con2)) {
                this.account = 2
            } else if (this.con1 || this.con2 || this.con3) {
                this.account = 1
            } else {
                this.account = 0
            }
        },
    },
}
</script>
<style  scoped>
</style>