Vue表单绑定

最新推荐文章于 2024-04-07 07:22:40 发布
最新推荐文章于 2024-04-07 07:22:40 发布
阅读量729 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66059613/article/details/127472109
版权

01输入文本的绑定

文本框

<!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>
<body>
    <div id="app">
        <!-- v-model指令讲文本框和数据模型中指定的数据双向绑定起来 -->
        <!-- placeholder（占位符） -->
        <input type="text"v-model="name" placeholder="请输入用户名">
        <p>{{name}}你好</p>

        <!-- 文本输入框 -->
        文本输入:<input type="text"><br>

        <!-- 密码框 -->
        密码输入：<input type="password"><br>

        <!-- 选择文件 -->
        选择文件：<input type="file"><br>
        
        <!--  type="checkbox（类型=复选框）用于某项选择的打开或关闭 -->
        反复选择：<input type="checkbox"><br>

        唯一选择：<input type="radio"><br>
    
        提交图片：<input type="image" src=""><br>

        <!-- type=submit(类型=图片)讲图片定义为提交按钮 专门用于提交表单的button按钮-->
        提交按钮：<input type="submit"><br>

        <!-- input type="month"(类型=提交)定义year（）年和mouth（月） -->
        选择月份：<input type="month"><br>

        <!--  type="number”（类型=数字）只有选择/输入 -->
        选择数字：<input type="number"><br>
        
        <!-- type="time"(类型=时间)定义分秒 -->
        选择时间：<input type="time"><br>

        <!-- type='week'(类型=周)定义年月日 -->
        选择周：<input type="week"><br>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'',
            }
        })
    </script>
</body>
</html>

 

修饰符

lazy：撤销不会即时

<!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>
<body>
    <div id="app">
        <!-- 事件修饰符.lazy（撤销）不会即时 -->
        <input v-model.lazy="msg">
        <span>{{msg}}</span>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'333'
            }
        })
    </script>
</body>
</html>

 number：修饰数字

<!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>
<body>
    <div id="app">
        <input type="number" v-model.number="age">
        <span>{{age}}</span>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
             age:'',
            },
            watch:{
                age(){
                console.log(typeof(this.age));
                }
            }
        })
    </script>
</body>
</html>

.trim屏蔽空格 

<!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>
<body>
    <!-- .trim屏蔽空格 -->
    <div id="app">
  <input type="text" v-model.trim="msg">
  <span>一个{{msg.length}}个字符</span>
    </div>
    <script src="../../js/vue.js"></script>
     <script>
         new Vue({
             el:'#app',
             data:{
                 msg:''
             }
         })
     </script>
</body>
</html>

选择类表单元素绑定 

<!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>
<body>
    <div id="app">
       <span>请选择一种语言：{{language}}</span>
        <select v-model="language">
            <option>python</option>
            <option>javascript</option>
            <option>c++</option>
        </select>
    
    </div>
    <script src="../../js/vue.js"></script>
    <script>
     new Vue({
         el:'#app',
         data:{
             language:''
         }
     })
    </script>
</body>
</html>

 

啊唯11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C# Winfrom 实现自定义表格+动态绑定数据
weixin_39448579的博客
08-27 2240
话不多说，上效果图 空表格 绑定数据 界面放个panel就够了。 上代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; na
Vue表单控件绑定图文详解
01-19
Vue 表单控件绑定的实现，具体可以通过以下步骤操作来实现。 1、基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇，v-model 不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。 2、Checkbox 单个勾选框，逻辑值： 3、多个勾选框，绑定到同一个数组： 4、动态选项，用 v-for 渲染： 5、值绑定 对于单选按钮，勾选框及选择框选项，v-model 绑定的值通常是静态字符串（对于勾选框是逻辑值）： 6、但是有时想绑定值到 Vue 实例一个动态属性上。可以用 v-bind 做到。
vue给input file绑定函数获取当前上传的对象完美实现方法
08-28
主要介绍了vue给input file绑定函数获取当前上传的对象完美实现方法,需要的朋友可以参考下
Vue表单绑定:Vue表单绑定用于实现表单元素与Vue实例数据之间的双向绑定
最新发布
Quantity>Quality
04-07 145
在Vue.js中，表单绑定是一项非常重要的功能，它允许我们将表单元素和Vue实例的数据进行双向绑定。这意味着当用户在表单元素中输入内容时，Vue实例中对应的数据会随之变化，反之亦然。通过表单绑定，我们可以轻松地处理用户输入、验证数据以及实时更新UI界面。本文将介绍Vue中常用的表单绑定方式，包括v-model指令、表单元素属性绑定等，并给出具体的代码示例帮助读者更好地理解。通过学习Vue表单绑定的相关知识，我们可以更高效地开发前端应用，实现与用户数据的交互和管理。
Vue第一部分(4)：表单的双向数据绑定：v-model指令
CSDN专家-微编程的博客
08-13 168
v-model简介 之前数据绑定都是单向绑定，数据影响了视图渲染，但是反过来就不行（视图的变化不会影响模型数据）,而对于表单中的控件而言，我们需要数据的绑定是双向的，即：模型数据的变化会影响视图，同时视图发生变化也会同步到模型数据。 接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。既然是双向绑定，一定是在视图中可以修改数据的组件，这样就限定了视图的元素类型。 目前v-model的可使用元素有： inputradiocheck...
【Vue 给表单绑定数据】
m0_54838595的博客
09-24 572
Vue 表单
vue中的数据绑定
m0_64567550的博客
03-18 528
我们知道vue中的数据绑定当时有三种（1）v-bind（2）v-model（3）插值语法{{}}
Vue实现文件上传（参数名称：file；请求格式：formData）
SunPeng的博客
01-06 6530
1、后端接口文档： 导入：POST /import [http:-192.168.1.1-%.....xlsx] 2、前端API获取： //导入 export function eventImport(obj) { return request({ url: '/api/accident/import', method: 'post', data: obj }) } 3、前端页面： <el-button type="prim
ElementUI中的el-table怎样实现绑定对象数组时每一列不同控件的动态数据绑定
BADAO_LIUMANG_QIZHI的博客
08-05 7045
场景 ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行： https://mp.csdn.net/console/editor/html/107815187 上面实现的效果如下 其中每一行都是动态添加的，每一行对应的是一个对象，每一列对应的是一个对象的属性。 所以整个el-table绑定的数据源就是一个对象的数组。 但是在页面上实现时怎样实现每一列的动态数据绑定。 首先添加一个el-table <el-table ...
Vue——表单输入绑定
hulin的博客
04-09 912
Vue的表单输入绑定
Vue表单及表单绑定方法
10-18
今天小编就为大家分享一篇Vue表单及表单绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue表单绑定实现多选框和下拉列表的实例
08-29
本篇文章主要介绍了vue表单绑定实现多选框和下拉列表的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
10-17
本文通过实例代码给大家介绍了Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
layui如何将编辑删除按钮绑定在表格中_Shopify后台格式文本编辑器操作详解
weixin_39620684的博客
11-30 151
使用 rich text editor 您可以使用 Shopify的格式文本编辑器来对您在线商店上显示的文本进行格式和样式设置。提示:在使用格式文本编辑器时，按 enter 或 return 可以创建新的段落。若要插入换行符而不强制产生新段落，请按住 shift，然后按 enter 或 return。(1)iPhone、Android 使用格式文本编辑器的位置您当前可以使用 Shopify 应用中...
Vue 中 双向绑定数据
梓鸿
04-10 185
Vue 中 双向绑定数据 1、文本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script s...
vue数据绑定、事件处理等
m0_60499747的博客
10-09 303
一、数据的绑定 vue中有两种数据绑定⽅式 （1）单向绑定（v-bind（简写为：））：数据只能从data流向⻚⾯ （2）双向绑定（v-model）：数据不仅能从data流向⻚⾯，还可以从⻚⾯流向data 注意：1.双向绑定⼀般都应⽤在表单类元素上（如：input、select...） 2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value的值 二、el和data的两种写法 总结：1.el有两种写法 ...
Vue（表单双向数据绑定、监听器、计算属性)
qq_48108860的博客
04-01 1237
目录 v-model实现表单双向数据绑定 watch监听器、侦听器 监听基本数据类型 监听引用数据类型（深度监听） computed计算属性 watch和computed的区别 v-model实现表单双向数据绑定 可以用 v-model 指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数
vue表格与表单校验联动，下拉联动，列表增加、删除
AS、SD的博客
06-01 732
template部分，想要每个都校验。data部分，根据自己需求更改。添加、删除、下拉联动方法。
VUE 表单绑定数组的中的第一个对象
05-25
如果你想要绑定数组中的第一个对象，你可以使用 Vue 中的计算属性来实现。假设你有一个名为 `form` 的数组，可以这样写： ```html export default { data() { return { form: [ { name: 'John', ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值