温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue表单事件数据绑定举例分析

发布时间:2021-11-22 09:06:51 来源:亿速云 阅读:110 作者:iii 栏目:开发技术

这篇文章主要讲解了“Vue表单事件数据绑定举例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue表单事件数据绑定举例分析”吧!

Vue表单事件数据绑定举例分析

<body>
    <div id="root">
        <form action="" @submit.prevent="demo">
            <label for="TW"> 姓名:</label>
            <input type="text" id="TW" v-model.trim="userInfo.account"><br><br> 密码:
            <input type="password" id="pa" v-model="userInfo.password"><br><br> 年龄:
            <input type="number" v-model.number="userInfo.age"> <br><br> 性别: <input type="radio" name="sex" value="male" v-model="userInfo.sex">男
            <input type="radio" name="sex" v-model="userInfo.sex" value="female">女<br><br> 爱好: 所属校区:
            <select v-model="userInfo.city">
                <option value="school">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
               <option value="shenzhen">深圳</option>
            </select>
            <br><br>
            <input type="checkbox" v-model="userInfo.hobby" value="study"> 学习
            <input type="checkbox" v-model="userInfo.hobby" value="sing"> 唱歌
            <input type="checkbox" v-model="userInfo.hobby" value="dance"> 跳舞
            <input type="checkbox" v-model="userInfo.hobby" value="game"> 王者<br><br> 其他信息:
            <textarea name="" v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree"> 阅读并接受
            <a href="#">《用户协议》</a><button>提交</button>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    age: '',
                    sex: 'female',
                    city: 'beijing',
                    hobby: [],
                    other: '',
                    agree: '',
                }
            },
            methods: {
                demo() {
                    console.log(JSON.stringify(this.userInfo));
                }
            }
        })
    </script>
</body>

感谢各位的阅读,以上就是“Vue表单事件数据绑定举例分析”的内容了,经过本文的学习后,相信大家对Vue表单事件数据绑定举例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI