vue中如何判断checkbox是否选中

console.log(event.target.checked)

例：

 

 例：

 

实现：选中按钮激活，不选 input 加上disabled

方法一：@click方法：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <label for="ab1"><input type="checkbox" id="ab1"  @click = "checkbox()">我同意</label><br/>
        <button type ="button" :disabled = "!dis">注册</button>

    </div>
</body>
<script src="js/vue2.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el:'#app',
    data:{
        dis:false
    },
    methods:{
        // 选中为true,未选中为false
        checkbox(){
            this.dis = event.target.checked
            console.log(event.target.checked)
        }
    }
})
</script>

</html>
复制代码

 

 

方法二：  v-model    ,v-model =“dis”的值就是checked   是否选中的值   等同于 event.target.checked

复制代码
<div id="app">
        <label for="ab2"><input type="checkbox" id="ab2" v-model="dis">我同意 {{dis}}</label><br/>
        <button type ="button" :disabled = "!dis">注册</button>
</div>


var vm = new Vue({
    el:'#app',
    data:{
        dis:false
    },
    methods:{
       
    }
})
复制代码

 

 

 

 

 

posted @   YJUI  阅读(19122)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天：
2019-05-07 JQuery中的().each以及.each的区别
点击右上角即可分享
微信分享提示