v-model checkbox

复选框分为当个勾选和多个勾选

1.单个勾选

        <div id="app">      
            <label for="check">
                <input type="checkbox" id="check" v-model="isChoose"/>同意
            </label>
            <h2>您的选择是：{{isChoose}}</h2>
            <button :disabled="!isChoose">下一步</button>
        </div>
    </body>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: '#app',
            data: {
                isChoose: false
            }
        })
    </script>

image.png

2.多个勾选

多个勾选时，数据color要是一个数组，当点击某个复选框时，内部就会触发@input事件，将当前复选框的value传给数据color

        <div id="app">
            <label for="red">
                <input type="checkbox" name="red" id="red" value="红" v-model="color"/>红
            </label>
            <label for="yellow">
                <input type="checkbox" name="yellow" id="yellow" value="黄" v-model="color"/>黄
            </label>
            <label for="blue">
                <input type="checkbox" name="blue" id="blue" value="蓝" v-model="color"/>蓝
            </label>
            <label for="green">
                <input type="checkbox" name="green" id="green" value="绿" v-model="color"/>绿
            </label>        
            <h2>您选择的颜色是{{color}}</h2>
        </div>
    </body>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: '#app',
            data: {
                color:[]
            }
        })
    </script>

image.png