小白学习Vue第五天(v-model实用的地方）

用法一radio单选项

 <!-- 添加name男女选项互斥 -->
        <label for="male">
            <input type="radio" value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" value="女" v-model="sex">女
        </label>

        <h2>你选择的是{{sex}}</h2>

用法二checkbox单选框

 <label for="agree">
            <input type="checkbox" v-model="isAgree">同意协议
        </label>
        <h2>你选择的是：{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>

用法三checkbox复选框

<input type="checkbox" v-model='hobbies' value="篮球">篮球
        <input type="checkbox" v-model='hobbies' value="足球">足球
        <input type="checkbox" v-model='hobbies' value="乒乓球">乒乓球
        <input type="checkbox" v-model='hobbies' value="橄榄球">橄榄球
        <h2>你喜欢的爱好是：{{hobbies}}</h2>

用法四 select下拉选项

<select name="" id="" v-model="fruits" multiple>
            <option value="apple">apple</option>
            <option value="banana">banana</option>
            <option value="榴莲">榴莲</option>
        </select>
        <h2>你选择的水果是：{{fruits}}</h2>

const app = new Vue({
        el: '#app',
        data: {
            sex: '女',
            isAgree: false,
            hobbies: [],
            fruits: []
        }
    })