vue表单

<form action="" id="app">
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码框：<input type="password" v-model="password"></p>
    <p>
        性别：
        <input type="radio" name="sex" id="" v-model="sex" value="男">男
        <input type="radio" name="sex" id="" v-model="sex" value="女">女
    </p>
    <p>
        爱好(多选按钮)：
        <input type="checkbox" name="lover" id="" v-model="love" value="吃">吃
        <input type="checkbox" name="lover" id="" v-model="love" value="玩">玩
        <input type="checkbox" name="lover" id="" v-model="love" value="睡觉">睡觉
        <input type="checkbox" name="lover" id="" v-model="love" value="唱歌">唱歌
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
    <p>填写表单内容如下：</p>
    <p>用户名：{{username}}</p>
    <p>密码：{{password}}</p>
    <p>性别：{{sex}}</p>
    <p>爱好(多选)：{{love}}</p>
</form>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            sex: '',
            love:[]
        }
    })
</script>