vue中的表单输入绑定

最新推荐文章于 2025-07-07 20:05:19 发布
最新推荐文章于 2025-07-07 20:05:19 发布
阅读量205 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # vue2 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TeFuir__Lv/article/details/128232600

表单的输入绑定

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 单行文本框 -->
        <!-- <input type="text" placeholder="请输入信息" v-model="msg">
        {{msg}}
        <hr> -->

        <!-- 多行文本框 -->
        <!-- <textarea v-model="msg"></textarea>
        {{msg}} -->
        <!-- <hr> -->

        <!-- 单个复选框，绑定到布尔值： -->

        <!-- 复选框不要绑定click,应该绑定@change事件 -->
        <!-- <input type="checkbox" id="checkbox1" v-model="msg">
        <label for="checkbox1">{{msg}}</label>
        <hr> -->

        <!-- 多个复选框，绑定到同一个数组： -->
        <!-- <div id='example-3'>
            <input type="checkbox" id="jack" value="Jack" v-model="list">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="list">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="list">
            <label for="mike">Mike</label>
            <br>
            <span>{{list}}</span>
        </div> -->

        <hr>

        <!-- 单选按钮 -->
        <!-- <div id="example-4">
            <input type="radio" id="one" value="One" v-model="option">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="option">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{option}}</span>
        </div> -->

        <hr>

        <!-- 选择框（下拉菜单） -->

        <!-- 单选时： -->
        <!-- <div id="example-5">
            <select v-model="option">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {{option}}</span>
        </div>

        <hr> -->

        <!-- 多选时 (绑定到一个数组)： -->
        <!-- <div id="example-6">
            <select multiple style="width: 50px;" v-model="list">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <br>
            <span>Selected:{{list}}</span>
        </div> -->

        <!-- 选择框（下拉菜单） -->
        <!-- 用 v-for 渲染的动态选项： -->

        <select>
            <option v-for="item in list">{{item}}</option>
        </select>
        <span></span>

        <button @click="addUser">添加新用户</button>

    </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                // msg: 'hello',
                msg: false,
                list:['Mike'],
                // list:[],
                // list:['a','b','c'],
                option:''
            },
            methods: {
                addUser(){
                }
            }
        });

    </script>
</body>

</html>

2. 表单输入绑定的修饰符

表单输入绑定修饰符(v-model修饰符)

  • v-model.lazy

    在失去输入焦点时，再更新数据

  • v-model.number

    接收的数据会自动转为数值型

  • v-model.trim

    自动去掉数据前后空白字符

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <div id="app">

        <!-- 表单输入绑定修饰符(v-model修饰符)  .lazy   .number  .trim -->

        <!-- <p><input type="text" v-model="msg1">{{msg1}}</p> -->
        <!-- lazy: 在失去输入焦点时，再更新数据 -->
        <!-- <p><input type="text" v-model.lazy="msg2">{{msg2}}</p> -->


        <!-- number: 接收的数据会自动转为数值型 -->
        <!-- <p><input type="number" v-model="msg1">{{msg1 + 1}}</p> -->
        <!-- <p><input type="text" v-model.number="msg3">{{msg3 + 1}}</p> -->

        <!-- trim: 自动去掉数据前后空白字符 -->
        <p><input type="text" v-model="msg1">----{{msg1}}----</p>
        <p><input type="text" v-model.trim="msg3">----{{msg3}}----</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg1: '',
                msg2: '',
                msg3: ''
            },
            methods: {}
        });
    </script>
</body>

</html>
Vue——表单输入绑定
hulin的博客
04-09 1284
Vue的表单输入绑定
vue表单输入绑定
m0_51281306的博客
04-12 1419
v-model 指令 • 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据 绑定。 • 首先我们来体验一下双向数据绑定的效果。 输入框绑定 表单数据绑定 输入框绑定 • 输入框分为单行输入框 input 与多行输入框 textarea。 单选按钮绑定 表单数据绑定单选按钮绑定 • 单选按钮的双向数据绑定方式如下 复选框绑定 表单数据绑定复选框绑定 • 复选框...
Vue表单输入绑定
weixin_33966095的博客
11-01 165
基础用法 你可以用v-model指令在表单input，textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但是v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据。 v-model会忽略所有表单元素的value, checked, selected特性的初始...
Vue-收集表单信息
问天丶天问
05-30 523
Vue-收集表单信息各常用控件详解以及使用实践 Demo
【VueJS】VueJs---表单输入绑定
DreamSeeker_1314的博客
08-14 480
基础用法 你可以用 v-model 指令在表单 &lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt; 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、chec...
Vue-表单输入绑定
qq_30607437的博客
04-28 346
转载自：https://www.cnblogs.com/koala0521/p/7744211.html自我理解：v-model  实际就是一个表单值。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt;     &lt;meta charset="utf-8"&gt;     &amp
Vue2（12） 表单输入绑定学习笔记
反贪局
04-01 383
本文详细阐述了Vue2中表单输入绑定的基础用法、修饰符、特殊场景，并提供了丰富的代码示例。通过本文的学习，我们可以更加灵活地在Vue应用中使用表单输入绑定功能，提高开发效率和用户体验。
Vue表单输入绑定的示例代码
10-17
在Vue中，`v-model` 是实现表单输入和应用状态之间双向绑定的指令。它在内部为不同的输入元素使用不同的属性并抛出不同的事件： 1. 对于文本和多行文本框，`v-model` 使用 `value` 属性和 `input` 事件。 2. 对于复...
vue-表单输入绑定
weixin_34413357的博客
09-04 178
表单输入绑定 1、基本语法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素 1.1、文本 <div id="app"> {{msg}} <input v-model="msg"> </div> <script> ...
VUE 表单输入绑定
最新发布
gajuogajuo的博客
07-07 144
1.用 v-model 指令在表单 <input>、<textarea>及 <select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-mode 本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。2.绑定事件（@触发方式="处理方法"）
VUE表单输入绑定
李继轩的博客
10-19 1032
vue表单输入绑定
Vue 表单输入绑定
白菜执笔人的博客
03-22 394
项目前导 学习笔记 一、表单输入绑定         v-model 指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值。 1.1、绑定的属性和事件         v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件。 tex...
vue--表单输入绑定
cmy741741的博客
11-18 514
概述 用v-model指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。 你应该通过 JavaScript 在组件的 data 选项中声明初始值。 1....
VUE表单数据绑定
qq_34400242的博客
05-03 2435
可以用 v-model 指令在表单input、textarea及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 tips:v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而...
Vue--表单输入绑定
qq_45954420的博客
03-08 1845
一、基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 1.注意 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model 在内部为不同的输入元素使用不同
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值