提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue指令：v-model数据绑定

Vue数据 指令 绑定 model
2023-09-14 09:01:59 时间 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>

    <div id="app" v-cloak>
        <h2>问卷调查</h2>
        <p>
            姓名：<input type="text" v-model="name">
        </p>
        <p>
            性别：
            <input type="radio" name="sex" value="男" v-model="sex">男
            <input type="radio" name="sex" value="女" v-model="sex">女
        </p>
        <p>
            爱好：
            <input type="checkbox" name="hobby" value="打篮球" v-model="hobby">打篮球
            <input type="checkbox" name="hobby" value="跳舞" v-model="hobby">跳舞
            <input type="checkbox" name="hobby" value="读书" v-model="hobby">读书
        </p>
        <p>
            籍贯：
            <select name="native" id="" v-model="native">
                <option value="河北">河北</option>
                <option value="河南">河南</option>
                <option value="山东">山东</option>
                <option value="山西">山西</option>
                <option value="湖南">湖南</option>
                <option value="湖北">湖北</option>
            </select>
        </p>
        <p>
            您填写的表单内容为：姓名：{{name}}，性别：{{sex}}，爱好：{{hobby}}，籍贯：{{native}}        
        </p>
        <button @click="submit">提交</button>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                name: '',
                sex: '男',
                hobby: [],
                native: '河北'
            },
            methods:{
                submit() {
                    //汇总信息提交到后端
                    let obj = {
                        name: this.name,
                        sex: this.sex,
                        hobboy: this.hobby,
                        native: this.native
                    }
                    console.log(obj)
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

相关文章