vue2.0中ckeckbox(復選框)的使用心得，及對click事件和change的理解

---

最近在公司項目中使用vue2.0做開發，在使用checkbox時遇到了一些問題，首先我們先了解一下需求。

如上如所示，在上方復選框被點擊時，更改下方p標簽的文本內容為：復選框已被選中。並將p標簽文字顏色改為紅色。
面對如此簡單的需求我第一個想到的就是通過點擊事件判斷復選框狀態，更改文本及css樣式，代碼如下：

<template>
    <div id="secert-main">
         <label for="label" @click.stop="clickMe">
                <input type="checkbox" id="label" v-model="ckeckVal" >點我
        </label>
        <p>復選框沒有被選中</p>
    </div>
</template>
<script type="text/javascript">
export default {
    data() {
            return {
                ckeckVal:false
            }
        },
        methods:{
    clickMe(){
        var that=this;
        console.log(that.ckeckVal);
    }
  }
}
</script>
<style type="text/css">
.red{
        color: red;
    }
</style>

我們利用v-model來綁定checkbox的值，可以發現，當我們選中之后效果如下圖：

@click的理解

打印的結果為false,但我們明明是選中狀態，結果應該為true才對，為什么會這樣吶，在vue的官方文檔中我找到了下面的一段話：

在上面的描述中，我們可以將我們的代碼理解為下面的內容：

可以用v-on指令監聽click事件，並在觸發時運行 console.log(that.ckeckVal);

仔細閱讀這句話之后，我們發現一個關鍵詞是：觸發時，也就是說上面代碼中clickMe的執行時間為點擊的那一瞬間，而不是點擊之后。而點擊的那一瞬間復選框的值也確實是``false，這也就解釋了為什么我們得到的結果為false。 明白這一點之后我們將@click換成@change`,點擊復選框之后得到如下結果：

@change的理解

結合在官網中對於監聽事件的解釋，我們對@change的理解為：

可以用v-on指令監聽change事件，並在狀態改變后運行 console.log(that.ckeckVal);

總結

click事件的觸發是在點擊的那一刻，而change事件是在狀態改變之后觸發。

---

最后根據需求完善我們的代碼：

<template>
    <div id="secert-main">
         <label for="label" @change="clickMe">
                <input type="checkbox" id="label" v-model="ckeckVal" >點我
        </label>
        <p :class="ckeckClass">復選框沒有被選中</p>
    </div>
</template>
<script type="text/javascript">
export default {
    data() {
            return {
                ckeckVal:false,
                ckeckClass:'',
                ckeckInfo:'復選框沒有被選中'
            }
        },
        methods:{
    clickMe(){
        var that=this;
        if(that.ckeckVal){
            that.ckeckInfo='復選框被選中了';
            that.ckeckClass='red';
        }else{
            that.ckeckInfo='復選框沒有被選中';
            that.ckeckClass='';
        }
    }
  }
}
</script>
<style type="text/css">
.red{
        color: red;
    }
</style>

以上僅供學習交流使用，如有錯誤，歡迎指正，謝謝！