Vue表单元素绑定数据（取值和赋值）

石头剪刀布左

已于 2023-07-28 17:01:00 修改

阅读量401

点赞数

文章标签： vue.js 前端 javascript css3 html5

于 2022-04-01 19:54:07 首次发布

本文链接：https://blog.csdn.net/m0_67624022/article/details/123906115

版权

表单元素绑定数据：v-model

非表单元素绑定数据：
        v-html：指令当做标签或者组件的属性使用

                作用：数据绑定（可以识别字符串标签）
        v-text：作用：数据绑定(不识别字符串标签)

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../vue.js"></script>

<body>
    <div id="app">
        {{userInfo}}
        <p>
            用户名：<input type="text" v-model="userInfo.username">
        </p>
        <p>
            密码：<input type="password" v-model="userInfo.pasw">
        </p>
        <p>
            性别：<input type="radio" name="sex" v-model="userInfo.sex" :value="0">男
            <input type="radio" name="sex" v-model="userInfo.sex" :value="1">女
        </p>
        <p>
            工作：
            <select v-model="userInfo.job">
                <option :value="item.value" v-for="(item,index) in jobList">
                    {{item.title}}
                </option>
            </select>
        </p>
        爱好：
        <p v-for="(item,index) in hobbyList" >
            <input type="checkbox" :value="item.value" v-model="userInfo.hobby">{{item.title}}
        </p>
        <p>
            是否同意：<input type="checkbox" v-model="userInfo.isgree">
        </p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                userInfo: {
                    username: 'admin',
                    pasw: '123',
                    sex: 0,
                    job: 'php',
                    hobby: ['smoking'],
                    isgree: true
                },
                jobList: [
                    {
                        id: 1,
                        value: 'web',
                        title: 'web工程师'
                    }, {
                        id: 2,
                        value: 'java',
                        title: 'java工程师'
                    }, {
                        id: 3,
                        value: 'php',
                        title: 'php工程师'
                    }
                ],
                hobbyList: [
                    {
                        id: 1,
                        value: 'travel',
                        title: '旅游'
                    }, {
                        id: 2,
                        value: 'draw',
                        title: '绘画'
                    }, {
                        id: 3,
                        value: 'eat',
                        title: '干饭'
                    }
                ]
            },
            methods: {
                submit() {
                    console.log(this.userInfo);
                    // 发送请求
                }
            },
        });
    </script>
</body>

</html>

运行结果：(当表单内的数据发生改变，上面的内容会一起改变)

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjc2MjQwMjI=,size_20,color_FFFFFF,t_70,g_se,x_16

石头剪刀布左

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue表单元素绑定数据（取值和赋值）

表单元素绑定数据：v-model非表单元素绑定数据：v-html：指令当做标签或者组件的属性使用作用：数据绑定（可以识别字符串标签）v-text：作用：数据绑定(不识别字符串标签)示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equi...
复制链接

扫一扫

Vue表单元素绑定数据（取值和赋值）

“相关推荐”对你有帮助么？