Vue 操作表单提交、复选、单选、下拉列表

最新推荐文章于 2022-05-24 00:30:42 发布

KingCruel

最新推荐文章于 2022-05-24 00:30:42 发布

阅读量1.5k

点赞数 1

分类专栏： Vue 文章标签： vue v-for

本文链接：https://blog.csdn.net/KingCruel/article/details/102929790

版权

Vue 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1、checkbox 复选
代码如下

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AxiosGet</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div class="latest_fabric">
        <ul>
            <li id="example-check">
                复选框
                <br />
                <div v-for="(checkOne,index) in checkList">
                    <input type="checkbox" :checked="false">
                    <span>{{checkOne.name}}</span>
                </div>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#example-check',
            data: {
                checkList: [
                    { name: '老王', value: 1 },
                    { name: '小张', value: 2 },
                    { name: '王伯', value: 3 }
                ]
            },
            methods: {
            }
        })
    </script>
</body>
</html>

2、radio 单选
代码如下

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AxiosGet</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div class="latest_fabric">
        <ul>
            <li id="example-radio">
                单选框
                <br />
                <div v-for="(radioOne,index) in radioList">
                    <input type="radio" name="test" :value="radioOne.value" v-on:click="getRadioVal(radioOne.value)">
                    <span>{{radioOne.name}}</span>
                </div>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#example-radio',
            data: {
                info: "123",
                radioList: [
                    { name: '老王', value: 1 },
                    { name: '小张', value: 2 },
                    { name: '王伯', value: 3 }
                ]
            },
            methods: {
                getRadioVal(value) {
                    console.log(value);
                }
            }
        })
    </script>
</body>
</html>

3、select 下拉列表
使用 v-for 指令，用 v-bind 指令绑定 value 属性；当选中某一项时，该选项的 value 值赋给 selected 变量；change 改变事件
*
代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div class="latest_fabric">
        <ul>
            <li id="example-select">
                下拉列表1
                <br />
                <select v-model="selected" @change="getSelectVal"><!-- 如果是.cshtml文件，使用 @@change="getSelectVal"；如果是.html文件，使用 @change="getSelectVal" -->
                    <option>--请选择--</option>
                    <option v-for="(item, index) in items" :key="index" v-bind:value="item.value">{{item.text}}</option>
                </select>
                <br />
                <span>已选:{{selected}}</span>
                <br /><br /><br />
                下拉列表2
                <br />
                <select v-model="fruit" v-on:change="getFruitVal">
                    <option>--请选择--</option>
                    <option v-for="item in fruitList" v-bind:value="item.value">{{item.text}}</option>
                </select>
                <br />
                <span>已选:{{fruit}}</span>
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#example-select',
            data: {
                items: [
                    { text: '老板', value: '1', },
                    { text: '经理', value: '2', },
                    { text: '主管', value: '3', }
                ],
                fruitList: [
                    { text: '苹果', value: 'apple' },
                    { text: '香蕉', value: 'banana' },
                    { text: '西瓜', value: 'watermelon' }
                ],
                selected: '',
                fruit: ''
            },
            methods: {
                getSelectVal: function () {
                    console.log(this.selected);
                },
                getFruitVal: function () {
                    console.log(this.fruit);
                },
            }
        })
    </script>
</body>
</html>

4、表单提交
代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="example-submit1">
        <form @submit.prevent="submitFrom">
            <!-- 注册提交事件 .prevent 阻止表单的默认提交行为 -->
            简单输入:
            <input type="text" v-model="name">
            单选：
            <input type="radio" v-model="open" value="1"> 开
            <input type="radio" v-model="open" value="0"> 关
            多选:
            <input type="checkbox" v-model="huolg" /> 火龙果
            <input type="checkbox" v-model="yezi" /> 椰子
            下拉选择框:
            <select v-model="weidao">
                <option value="xl">香辣</option>
                <option value="ml">麻辣</option>
                <option value="qt">清汤</option>
                <option value="yy">鸳鸯</option>
            </select>
            <input type="submit" value="确定" />
        </form>
    </div>
    <br />
    <br />
    <div id="example-submit2">
        <form @submit.prevent="submitFrom">
            <!-- 注册提交事件 .prevent 阻止表单的默认提交行为 -->
            简单输入:
            <input type="text" v-model="formData.name">
            单选：
            <input type="radio" v-model="formData.open" value="1"> 开
            <input type="radio" v-model="formData.open" value="0"> 关
            多选:
            <input type="checkbox" v-model="formData.huolg" /> 火龙果
            <input type="checkbox" v-model="formData.yezi" /> 椰子
            下拉选择框:
            <select v-model="formData.weidao">
                <option value="xl">香辣</option>
                <option value="ml">麻辣</option>
                <option value="qt">清汤</option>
                <option value="yy">鸳鸯</option>
            </select>
            <input type="submit" value="确定" />
        </form>
    </div>

    <script>
        new Vue({
            el: '#example-submit1',
            data: {
                name: "",
                open: "",
                huolg: "",
                yezi: "",
                weidao: "",
            },
            methods: {
                submitFrom: function () {
                    console.log(this.name);
                }
            }
        })
        new Vue({
            el: '#example-submit2',
            data: {
                formData: {
                    name: "",
                    open: "",
                    huolg: "",
                    yezi: "",
                    weidao: "",
                }
            },
            methods: {
                submitFrom: function () {
                    console.log(this.formData);
                }
            }
        })
    </script>
</body>
</html>

5、
*
*
*
6、
*
*
*
*

KingCruel

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue 操作表单提交、复选、单选、下拉列表

1、checkbox 复选代码如下<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>AxiosGet</title> <script src="https:/...
复制链接

扫一扫