vue双向数据绑定

一、单选框的数据双向绑定

<template>
    <div>
        <p>
            <label>
                <input type="radio" name="st" value="c" v-model="styles">颜色
            </label>
            <label>
                <input type="radio" name="st" value="b" v-model="styles">品牌
            </label>
        </p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                styles: 'c'
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>

二、复选框的双向数据绑定

<template>
    <div>
        <p>
            <label>
                <input type="radio" name="st" value="c" v-model="styles">颜色
            </label>
            <label>
                <input type="radio" name="st" value="b" v-model="styles">品牌
            </label>
        </p>
        <div v-show="styles === 'c'">
            <p>
                红色
            </p>
            <p>
                白色
            </p>
        </div>
         <div v-show="styles === 'b'">
            <p>
                丰田
            </p>
            <p>
                大众
            </p>
        </div>
        <div>
            <label>
                <input type="checkbox" v-model="read">我已阅读协议
            </label>
            <button :disabled="!read">提交</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                styles: 'c',
                read: false,
            }
        },
    }
</script>

<style>

</style>