vue中如何判斷checkbox是否選中

本文轉載自查看原文 2020-05-07 17:17 13943 Input表單相關/ Input提交相關

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:{
       
    }
})

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue中如何判斷checkbox是否選中 vue中如何判斷checkbox是否選中 checkbox如何判斷是否選中判斷checkbox是否選中判斷HTML中的checkbox是否被選中 jq、js中判斷checkbox是否選中 js中對radio和checkbox是否選中的判斷 JQuery判斷CheckBox是否選中如何判斷Input的checkbox是否選中 js判斷checkbox是否選中