master

分支 (1)

管理

管理

master

vue2_test
/
vue2_nocli
/
ch11.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<a href="index.html">返回</a>
<div class="app">
    <h2>收集表单数据</h2>
    <form @submit.prevent="show">
        username: <input type="text" v-model="forminfo.username"><br>
        password: <input type="text" v-model="forminfo.password"><br>
        age: <input type="number" v-model.number="forminfo.age"><br>
        性别： 男<input type="radio" v-model="forminfo.sex" value="男">
        女 <input type="radio" v-model="forminfo.sex" value="女"><br>
        爱好：吃<input type="checkbox" v-model="forminfo.holly" value="吃">喝
        <input type="checkbox" v-model="forminfo.holly"  value="喝">玩
        <input type="checkbox" v-model="forminfo.holly"  value="玩"><br>
        学历<select v-model="forminfo.edu">
        简介<textarea v-model.lazy="forminfo.info"></textarea>
        <option >小学</option>
        <option >初中</option>
        <option >高中</option>
    </select>


        <input type="submit">
    </form>
</div>
<script>
    Vue.config.productionTip = false  //关闭生产状态提示
    const x = new Vue({
        // el:".app",
        data: function () {  //data的第二种写法
            return {
                forminfo: {
                    username: '',
                    password: '',
                    age: 0,
                    sex:'',
                    holly:[],
                    edu:'',
                    info:''
                }
            }
        },
        methods: {
            show() {
                console.log(this.forminfo)
            }
        }
    })
    x.$mount(".app")//挂载方式
</script>
</body>
</html>