Vue.js 表单控件绑定

最新推荐文章于 2023-11-20 16:29:02 发布
最新推荐文章于 2023-11-20 16:29:02 发布
阅读量1k 收藏 6
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi_zi_183/article/details/122403119
版权

Vue.js 表单控件绑定

在Web应用中，我们经常会使用表单向服务端提交一些数据，而通常也会在表单项中绑定一些如input、change等事件对用户输入地数据进行校验、更新等操作。在Vue.js中、我们可以使用v-model指令同步用户输入的数据到Vue实例data属性中，同时会对radio、checkbox、select等原生表单组件提供一些语法糖使表单操作更加容易。

基本用法

text

设置文本框v-model为name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <span>Welcome {{name}} join DDFE</span>
        <br>
        <input type="text" v-model="name" placeholder="join DDFE">
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            name: ""
        }
    })
</script>
</html>

在这里插入图片描述
当用户操作文本框时，vm.name会自动更新为用户输入的值，同时，span内的内部也会随之改变。

checkbox

复选框checkbox在表单中会经常使用，下面我们来看看单个checkbox如何使用v-model。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            checked: true
        }
    })
</script>
</html>

在这里插入图片描述
在这里插入图片描述
当用户勾选了checkbox时，vm.checked=true，否则vm.checked=false，label中的值也会随之改变。
大多数时候我们使用的都是多个复选框，即一个复选框组。此时，被选中的值将会放入一个数组中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <input type="checkbox" id="flash" value="flash" v-model="bizLines">
        <label for="flash">快车</label>
        <input type="checkbox" id="premium" value="premium" v-model="bizLines">
        <label for="premium">专车</label>
        <input type="checkbox" id="bus" value="bus" v-model="bizLines">
        <label for="bus">巴士</label>
        <br>
        <span>Checked lines: {{bizLines | json}}</span>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            bizLines: []
        }
    })
</script>
</html>

在这里插入图片描述

radio

当单选钮被选中时，v-model中的变量值会被赋值为对应的value值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <input type="radio" id="flash" value="flash" v-model="bizLine">
        <label for="flash">快车</label>
        <br>
        <input type="radio" id="bus" value="bus" v-model="bizLine">
        <label for="bus">巴士</label>
        <br>
        <span>Picked: {{bizLine}}</span>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            bizLine: ""
        }
    })
</script>
</html>

在这里插入图片描述
在这里插入图片描述
注：可以看到这里没有将两个单选设置为同一name，但是它们仍然互斥了，这是v-model的作用。

select

因为select控件分为单选和多选，所以v-model在select控件的单选和多选上会有不同的表现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <select v-model="bizLine">
            <option selected value="flash">快车</option>
            <option value="premium">专车</option>
            <option value="bus">巴士</option>
        </select>
        <span>Selected: {{bizLine}}</span>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            bizLine: ""
        }
    })
</script>
</html>

在这里插入图片描述
当被选中的option有value属性时，vm.selected为对应option的value值；否则为对应options的text值。
对于多选select控件，被选中的值会放入一个数组中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <select v-model="bizLines" multiple>
            <option selected value="flash">快车</option>
            <option value="premium">专车</option>
            <option value="bus">巴士</option>
        </select>
        <span>Selected: {{bizLines | json}}</span>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            bizLines: []
        }
    })
</script>
</html>

在这里插入图片描述
我们也可以通过v-for指令来动态生成option。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <select v-model="bizLine">
            <option v-for="option in options" :value="option.value">
                {{option.text}}
            </option>
        </select>
        <span>Selected: {{bizLine}}</span>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            bizLine: 'flash',
            options: [
                {text: '快车',value: 'flash'},
                {text: '专车',value: 'premium'},
                {text: '巴士',value: 'bus'},
            ]
        }
    })
</script>
</html>

在这里插入图片描述

值绑定

在通常情况下，对于radio、checkbox、select组件，通过v-model绑定的值都是字符串，checkbox除外，checkbox可能是布尔值。
有时我们会有动态绑定Vue.js实例属性的需求，这时可以使用v-bind来实现这个需求。通过v-bind来代替直接使用value属性，我们还可以绑定非字符串的值，如数值、对象、数组等。
1、checkbox

<input type="checkbox" v-model="toggle" :true-value="a" :flase-value="b">
  • 勾选checkbox时，vm.toggle === vm.a
  • 未勾选checkbox时，vm.toggle === vm.b
    注：:true-value和:false-value只适合同一个checkbox组只有一个checkbox的情况。如果有多个checkbox，请使用:value进行绑定。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <input type="checkbox" id="flash" :value="flash" v-model="bizLines">
        <label for="flash">{{flash.name}}</label>
        <input type="checkbox" id="premium" :value="premium" v-model="bizLines">
        <label for="premium">{{premium.name}}</label>
        <input type="checkbox" id="bus" :value="bus" v-model="bizLines">
        <label for="bus">{{bus.name}}</label>
        <br>
        <span>Checked bizLines: {{bizLines | json}}</span>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            flash: {name: '快车'},
            premium: {name: '专车'},
            bus: {name: '巴士'},
            bizLines: []
        }
    })
</script>
</html>

在这里插入图片描述
2、radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <input type="radio" v-model="pick" :value="a">
        <br>
        <span>pick: {{pick}}</span>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            pick: "",
            a:"a"
        }
    })
</script>
</html>

勾选radio时，vm.pick === vm.a
3、select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <select v-model="selected">
            <option :value="{number:123}">123</option>
        </select>
        <br>
        <span>selected: {{selected | json}}</span>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            selected: ""
        }
    })
</script>
</html>

在这里插入图片描述
用户勾选时，vm.selected === {number:123}

v-model 修饰指令

v-model用来在视图与Model之间同步数据，但是有时候我们需要控制同步发生的时机，或者在数据同步到Model之前将数据转换为Number类型。我们可以在v-model指令所在的form控件上添加相应的修饰指令来实现这个需求。

.lazy

在默认情况下，v-model在input事件中同步输入框的值与数据，可以添加一个lazy特性，从而改到在change事件中去同步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <input v-model.lazy="msg">
        <br>
        {{msg}}
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            msg: ""
        }
    })
</script>
</html>

在这里插入图片描述

.number

当传给后端的字段类型必须是数值的时候，我们可以在v-model所在控件上使用number指令，该指令会在用户输入被同步到Model中时将其转换为数值类型，如果转换结果为NaN，则对应的Model值还是用户输入的原始值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <input v-model.number="msg">
        <br>
        {{msg}}
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            msg: 0
        }
    })
</script>
</html>

.trim

输入首尾空格过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <input v-model.trim="msg">
        <br>
        {{msg}}
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            msg: ""
        }
    })
</script>
</html>

在这里插入图片描述

shi_zi_183
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习vue.js表单控件绑定操作
01-19
本文实例为大家分享了vue.js表单控件绑定的具体代码，供大家参考，具体内容如下 html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>表单控件绑定</title&gt...
Using label elements to associate text labels with form controls
u013786394的专栏
04-16 1354
如果标签使用的时候没有与一个form control 绑定在一起的话，使用WAVE检查accessbility的时候这种情况会被标记出来。 需要给每一个label都绑定一个form control 来提高usability The objective of this technique is to use the label element to explicitly asso
eslint生成html报告,javascript – 在React中使用htmlFor传递eslint html-has-for
weixin_36289742的博客
06-07 495
我有一个无状态的React组件,如下所示：const propTypes = exact({fieldId: PropTypes.string.isRequired,text: PropTypes.string.isRequired,});function Label({ fieldId, text }) {return ({text});}Label.propTypes = propTypes;...
在原有项目中使用eslint的demo以及基础的rules配置
怎样过不是过的博客
02-22 1669
项目：vue cli3框架 、nuxt 官方文档：List of available rules - ESLint中文 一：在原有的项目中引入eslint 你可以使用 npm 安装 ESLint： $ npm install eslint --save-dev 紧接着你应该设置一个配置文件： $ ./node_modules/.bin/eslint --init 之后会生成下面这个文件 会生成这个文件 .eslintrc.js .eslintrc.js 文件如下 module....
vue.js自定义指令
qingkao123的博客
01-07 215
品牌列表管理案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
vue项目 安装eslint校验
cjexe的博客
08-18 4609
eslint 代码风格校验 Step 1 安装 npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D 这些包是eslint-config-standard这个包的官方文档推荐我们安装的 根目录下创建.e...
Vue.js表单控件实践
10-21
通过这些实践，我们可以看到Vue.js是如何简化表单控件的数据绑定和事件处理的。Vue的响应式系统确保了数据的变化能够立即反映到UI上，反之亦然，这大大提高了开发效率，让开发者能更加专注于业务逻辑，而不是DOM操作...
Vue.js 表单控件操作小结
12-11
v-model指令：在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定： HTML <!DOCTYPE ...
Vue.js事件处理器与表单控件绑定详解
10-20
主要为大家详细介绍了Vue.js事件处理器与表单控件绑定详解的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
代码模版-实现form表单输入框和label统一对齐，vue+elementui
abcnull 的博客
11-20 5207
el-form 中每个 el-form-item 都是一个单独的小项目，默认 el-form-item 都是换行的，除非加上。通过 vue + elementUI 实现 form 表单中输入框还有 label 统一对齐。属性 right 表示右对齐，即可对齐，但是不想都弄成 1 列，可以让他们都是 1 行，属性表示前面每个 label 宽度是多少，然后设置。有的输入框长度不一致，前端谷歌调试后，通过。想设置对齐的话，先可以设置。属性，就是表示弄成一行。
label包裹input，点击label，label响应两次
u010552788的专栏
06-22 6522
一、label和input合作的两种形式来自 W3C The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either
eslint jsx-a11y校验报错
jjh0901的博客
11-05 3547
在集成Airbnb规则下，采用import和export时会报如下错误 Definition for rule ‘jsx-a11y/label-has-associated-control’ was not found eslint(jsx-a11y/label-has-associated-control) 本想在.eslintrc中关闭jsx-a11y/label-has-associated-control规则，但是关闭后还是会报如下错误 Definition for rule ‘jsx-a1
This inspection highlights chained comparisons that can be simplified.
m_pNext的博客
03-27 327
pycharm 提示 “This inspection highlights chained comparisons that can be simplified.”。 表示可以化简，对于这样的 可以简化为 即 python 支持 bound1 < i < bound2 的写法 无需写为 bound1 < i and i < bound2
关于html name 和id，Form input without an associated label or title attribute
dike1074的博客
06-11 138
这不是一个错误，它建议将标签与UX方便起见相应的表单元素。例如为名称字段： 然后给出一个示例 <label for="name">Nazwa:</label> <textarea class="form-control" id="name" name="newTodo" data-ng-model="formData.newTodo" requir...
Vue环境搭建以及vue-cli使用
qq_21428081的博客
04-02 1682
1.Vue环境搭建以及vue-cli使用 1.1 Vue的环境搭建 （1）第一种方式：在页面用<script>标签引入CDN 在html文件的<head>标签中引入<script>标签，src指向CDN，多种CDN的写法可参考https://cn.vuejs.org/v2/guide/installation。 以下几种都可以，刷新页面，看开发者工具...
IntelliJ IDEA 提示"Form input without an associated label or title attribute"
酹江月的博客
07-03 4341
在HTML中如果用了input标签，没有指定placeholder的话，IDE会提示： Form input without an associated label or title attribute 解决方案：指定placeholder，如下： <input type="password" name="password" id="password" placeholder=...
vue学习之道
冯龙天的博客
01-09 484
前言 ​官网 Vue是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 渐进式概念 渐进式就是逐渐使用, 集成更多的功能 库和框架概念 库: 封装的属性或方法 (例jQuery) 框架: 拥有自己的规则和元素, 比库强大的多 (例Vue) 第一个helloworld vue vue组件
vue.js cdn 引入（cdn地址总结）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
06-16 4万+
对于制作原型或学习，你可以这样使用最新版本： 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： 如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件： 你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把 换成 。这是一个更小的构建，可
有关vue3语法讲解使用
最新发布
12-04
在Vue中，双向数据绑定是通过`v-model`指令实现的，这使得表单控件的值能与数据对象的属性直接关联并实时同步。例如： ```html <!DOCTYPE html> <title>Document <p>{{ message }} <script src="js...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值