vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解

最新推荐文章于 2025-09-07 21:44:58 发布

转载最新推荐文章于 2025-09-07 21:44:58 发布 · 2.3k 阅读

博主在公司项目用Vue2.0开发时，使用复选框遇到问题。需求是点击复选框更改下方p标签文本及颜色。博主起初用点击事件判断状态，发现结果不符。经研究官网文档，明确click事件在点击瞬间触发，change事件在状态改变后触发，最后完善了代码。

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>