vue学习笔记三：常见的表单绑定

Posted 2020-10-02 点点乐淘淘

<template>
    <div id="app">
        <input type="checkbox" id="checked" v-model="checked"/>
        <label for="checked">{{checked}}</label><br />
        <input type="checkbox" id="jack" value="jack" v-model="names" />
        <label for="jack">jack</label>
        <input type="checkbox" id="sim" value="sim" v-model="names" />
        <label for="sim">sim</label>
        <input type="checkbox" id="tom" value="tom" v-model="names" />
        <label for="tom">tom</label>
        <input type="checkbox" id="mei" value="mei" v-model="names" />
        <label for="mei">mei</label>
        <p>{{names}}</p>
        <input type="radio" id="male" value="male" v-model="gender" />
        <label for="male">male</label>
        <input type="radio" id="female" value="female" v-model="gender" />
        <label for="female">female</label>
        <p>{{gender}}</p>
        <select name="choose" id="choose" v-model="choose">
            <option value="" disabled="">please select</option>
            <option value="grade one">grade one</option>
            <option value="grade two">grade two</option>
            <option value="grade third">grade third</option>
        </select>
        <p><label for="choose">{{choose}}</label></p>
    </div>
</template>

<script>
    export default {
        name: ‘app‘,
        data() {
            return {
                checked : false,
                names : [],
                gender : "",
                choose : "",
            }
        }
    }
    
</script>