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

最新推荐文章于 2023-03-30 19:06:39 发布

落雨、离秋

最新推荐文章于 2023-03-30 19:06:39 发布

阅读量1.2k

点赞数

文章标签： vue js java javascript python

本文链接：https://blog.csdn.net/qq_42680761/article/details/115475683

版权

本文介绍了在Vue2.0项目中遇到的复选框（Checkbox）使用问题，探讨了@click和@change事件的区别。通过示例代码说明，当点击复选框时，预期改变文本和样式，但发现@click事件在点击瞬间而非状态改变后执行。通过官方文档了解到，@change事件在状态变化后触发，更适合用于这种情况。最终，文章总结了click和change事件的适用场景。

摘要由CSDN通过智能技术生成

最近在公司项目中使用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 {