vue表单操作

最新推荐文章于 2025-05-30 16:56:35 发布

不秃头的小李同学

最新推荐文章于 2025-05-30 16:56:35 发布

阅读量630

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41767945/article/details/122526906

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的表单示例，包括文本输入、单选按钮、复选框及下拉选择等元素的双向数据绑定，并演示了如何通过Vue的方法捕获表单提交事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--
 * @Description: 
 * @Autor: leechoy
 * @Date: 2022-01-16 18:12:57
 * @IDE: Visual Studio Code
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="app" class="demo">
        <form action="">
            <div class="name">
                <span>姓名</span>
                <input v-model='name' type="text">
                <span>{{ name }}</span>
            </div>
            <!-- 单选 -->
            <div class="sex">
                <label for="male">男</label>
                <input type="radio" id="mail" value="1" v-model='gender'>
                <label for="female">女</label>
                <input type="radio" id="female" value="2" v-model='gender'>
            </div>
            <!-- 多选框 -->
            <div class="mutlbox">
                <span>爱好</span>
                <div>
                    <label for="ball">篮球</label>
                    <input type="checkbox" id='ball' value="1" v-model='hobby'>
                    <label for="sing">唱歌</label>
                    <input type="checkbox" id='sing' value="2" v-model='hobby'>
                    <label for="dance">舞蹈</label>
                    <input type="checkbox" id='dance' value="3" v-model='hobby'>
                </div>
            </div>
            <!-- 下拉框 -->
            <div class="selector">
                <span>职业</span>
                <select name="" id="" v-model='selector'>
                    <option value="1">中国</option>
                    <option value="2">美国</option>
                    <option value="3">泰国</option>
                    <option value="4">韩国</option>
                </select>
            </div>
            <!-- 提交按钮 -->
            <div>
                <span>文本</span>
                <div>
                    <textarea v-model='des' name="" id="" cols="30" rows="10"></textarea>
                </div>
            </div>
            <div>
                <input type="submit" @click.prevent='submit'>
            </div>
        </form>

    </div>

    <script>
        const vm = {
            data() {
                return {
                    name: '',
                    message: 'Hello Vue!!',
                    gender: '1',
                    hobby: ['1'],
                    selector: '2',
                    des: ''
                }
            },
            methods: {
                submit: function() {
                    console.log(this.gender);
                    console.log(this.hobby);
                    console.log(this.selector);
                    console.log(this);
                }
            }
        }

        Vue.createApp(vm).mount('#app')
    </script>
</body>

</html>