Vue - - - 表单与v-model

最新推荐文章于 2022-04-25 20:05:47 发布
最新推荐文章于 2022-04-25 20:05:47 发布
阅读量261 收藏
点赞数
分类专栏： Vue.js 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48430685/article/details/109847893
版权

1.

在这里插入图片描述

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

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message" placeholder="输入…" />
        <p>输入的内容是：{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</body>

</html>

2.

在这里插入图片描述

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

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" @input="handleInput" placeholder="输入…" />
        <p>输入的内容是：{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            methods: {
                handleInput: function(e) {
                    this.message = e.target.value;
                }
            }
        })
    </script>
</body>

</html>

3.

在这里插入图片描述
在这里插入图片描述

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

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" @input="handleInput" placeholder="输入…" />
        <p>输入的内容是：{{ message }}</p>

        <input type="radio" v-model="picked" value="HTML" id="html" />
        <label for="html">HTML</label>
        <br />
        <input type="radio" v-model="picked" value="JS" id="html" />
        <label for="js">JavaScript</label>
        <br />
        <input type="radio" v-model="picked" value="CSS" id="html" />
        <label for="css">CSS</label>
        <br />
        <p>选择的项是：{{ picked }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '',
                picked: 'JS'
            },
            methods: {
                handleInput: function(e) {
                    this.message = e.target.value;
                }
            }
        })
    </script>
</body>

</html>

4.

在这里插入图片描述
在这里插入图片描述

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

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" @input="handleInput" placeholder="输入…" />
        <p>输入的内容是：{{ message }}</p>

        <input type="radio" v-model="picked" value="HTML" id="html" />
        <label for="html">HTML</label>
        <br />
        <input type="radio" v-model="picked" value="JS" id="html" />
        <label for="js">JavaScript</label>
        <br />
        <input type="radio" v-model="picked" value="CSS" id="html" />
        <label for="css">CSS</label>
        <br />
        <p>选择的项是：{{ picked }}</p>

        <input type="checkbox" v-model="checked" id="checked" />
        <label for="checked">选择状态：{{ checked }}</label>

    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '',
                picked: 'JS',
                checked: false
            },
            methods: {
                handleInput: function(e) {
                    this.message = e.target.value;
                }
            }
        })
    </script>
</body>

</html>

5.

在这里插入图片描述
在这里插入图片描述

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

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" @input="handleInput" placeholder="输入…" />
        <p>输入的内容是：{{ message }}</p>

        <input type="radio" v-model="picked" value="HTML" id="html" />
        <label for="html">HTML</label>
        <br />
        <input type="radio" v-model="picked" value="JS" id="js" />
        <label for="js">JavaScript</label>
        <br />
        <input type="radio" v-model="picked" value="CSS" id="css" />
        <label for="css">CSS</label>
        <br />
        <p>选择的项是：{{ picked }}</p>

        <!-- <input type="checkbox" v-model="checked" id="checked" /> -->
        <!-- <label for="checked">选择状态：{{ checked }}</label> -->

        <input type="checkbox" v-model="checked" value="JS" id="js" />
        <label for="js">JavaScript</label>
        <br>
        <input type="checkbox" v-model="checked" value="CSS" id="css" />
        <label for="css">CSS</label>
        <br>
        <input type="checkbox" v-model="checked" value="HTML" id="html" />
        <label for="html">HTML</label>
        <br>
        <p>选择的项是：{{ checked }}</p>

    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '',
                picked: 'JS',
                checked: ['HTML', 'CSS']
            },
            methods: {
                handleInput: function(e) {
                    this.message = e.target.value;
                }
            }
        })
    </script>
</body>

</html>

6.

在这里插入图片描述
在这里插入图片描述

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

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" @input="handleInput" placeholder="输入…" />
        <p>输入的内容是：{{ message }}</p>

        <input type="radio" v-model="picked" value="HTML" id="html" />
        <label for="html">HTML</label>
        <br />
        <input type="radio" v-model="picked" value="JS" id="js" />
        <label for="js">JavaScript</label>
        <br />
        <input type="radio" v-model="picked" value="CSS" id="css" />
        <label for="css">CSS</label>
        <br />
        <p>选择的项是：{{ picked }}</p>

        <!-- <input type="checkbox" v-model="checked" id="checked" /> -->
        <!-- <label for="checked">选择状态：{{ checked }}</label> -->

        <input type="checkbox" v-model="checked" value="JS" id="js" />
        <label for="js">JavaScript</label>
        <br>
        <input type="checkbox" v-model="checked" value="CSS" id="css" />
        <label for="css">CSS</label>
        <br>
        <input type="checkbox" v-model="checked" value="HTML" id="html" />
        <label for="html">HTML</label>
        <br>
        <p>选择的项是：{{ checked }}</p>

        <!-- multiple多选 -->
        <select v-model="selected" multiple>
            <option>HTML</option>
            <option>JavaScript</option>
            <option value="css">CSS</option>
        </select>
        <p>选择的项是：{{ selected }}</p>

        <br>
        <select v-model="selected" multiple>
            <option v-for="option in options" :value = "option.value">{{ option.text }}</option>
            
        </select>
        <p>选择的项是：{{ selected }}</p>

    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '',
                picked: 'JS',
                checked: ['HTML', 'CSS'],
                selected: 'html',
                options: [{
                    text: 'HTML',
                    value: 'html'
                }, {
                    text: 'JavaScript',
                    value: 'js'
                }, {
                    text: 'CSS',
                    value: 'css'
                }]
            },
            methods: {
                handleInput: function(e) {
                    this.message = e.target.value;
                }
            }
        })
    </script>
</body>

</html>

7.绑定值

  • 有时需要绑定一个动态的数据，这时可以用 v-bind 来实现。

7.1 单选按钮

  • 在选中时， app.picked === app.value ，值都是 123。
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="radio" v-model="picked" :value="value" />
        <label>单选按钮</label>
        <p>{{ picked }}</p>
        <p>{{ value }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                picked: false,
                value: 123
            }
        })
    </script>
</body>

</html>

7.2 复选框

  • 勾选时， app.toggle === app.value1；未勾选时， app.toogle === app.value2 。
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

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

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2" />
        <label>复选框</label>
        <p>{{ toggle }}</p>
        <p>{{ value1 }}</p>
        <p>{{ value2 }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                toggle: false,
                value1: 'a',
                value2: 'b'
            }
        })
    </script>
</body>

</html>

7.3 选择列表

  • 当选中时， app.selected 是一个 Object，所以 app.selected.number === 456。在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <select v-model="selected">
            <option :value="{ number: 456 }">123</option>
        </select>
        <p>{{ selected.number }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                selected: ''
            }
        })
    </script>
</body>

</html>

8.修饰符

  • 与事件的修饰符类似， v-model 也有修饰符，用于控制数据同步的时机。

8.1 lazy

  • 使用修饰符 .lazy 会转变为在 change 事件中同步，这时，message 并不是实时改变的，而是在失焦或者按回车时才更新。
    在这里插入图片描述
    在这里插入图片描述
    失去焦点
    按回车
<!DOCTYPE html>
<html lang="en">

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model.lazy="message" />
        <p>{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</body>

</html>

8.2 number

  • 使用修饰符 .number 可以将输入转换为 Number 类型，否则虽然你输入的是数字，但它的类型其实是 String，在数字输入框中比较有用。
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 浮点数框 -->
        <input type="number" v-model.number="message"  min="0.00" max="999.00" step="0.01" />
        <p>{{ typeof message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 123
            }
        })
    </script>
</body>

</html>

8.3 trim

  • 修饰符 .trim 可以自动过滤输入的首尾空格。
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<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>
    <script type="text/javascript" src="./vue.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model.trim="message" />
        <p>{{ message }}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</body>

</html>
zicl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门之核心指令（v-model，v-on）
qq_47906421的博客
08-14 353
Vue入门一. Vue.js是什么？二. 库和框架的区别2.1 库(Library)2.2 框架(Framework)三. MVVM的介绍双向绑定实例：四. 双向数据绑定(Vue two way data binding)五. 安装Vue六. 实例生命周期钩子(了解即可) 一. Vue.js是什么？ Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/中国无锡 二. 库和框架的区别 2.1 库(Library) 本质上是
vue 常用的表单修饰符 .number .lazy .trim
@tangguo123 博客
05-20 393
修饰符 .lazy <input v-model.lazy="msg" > 添加了lazy后，输入框中的数据会在change事件中同步，不会随着输入同时同步 .number  <inpput v-model.number="num" type="number"> 输入框...
将字符串转化为浮点数
tom555cat
09-28 2460
double convertToFloat(char* str) { double num = 0.0; int i = 0; double t = 10; bool isNegative = false; bool firstPointFlag = false; if(str == NULL) return num; if(str[i] == '-') { isNegat
Vue学习之路5-v-model指令
weixin_30569153的博客
07-19 518
1. 指令释义 v-model在表单控件或者组件上创建双向绑定，本质上是负责监听用户的输入事件（onchange，onkeyup，onkeydown等，具体是哪个，还请查阅官方底层实现文档）以更新数据，并对一些极端场景进行一些特殊处理。 2.表单输入绑定方式和方法 2.1 input框实现双向数据绑定示例： 1 <template> 2 <div&gt...
vue中使用过滤器filter处理浮点数小数位数
乔的博客
07-01 1612
项目中，在处理购物车数据时，由于价格往往都是浮点数，而JS中对于小数点的精度是无法保证的，所以计算后的浮点数有时候会出现小数位数太多，并不是我们想要的结果，想到使用toFixed() 方法实现保留一定小数位数。 因为购物车、订单页等页面都要用到，所以全局注册过滤器filters。 1.vue项目中可能需要用到很多filters，所以在src目录下新建一个common/filter目录，在filte...
vue自定v-model实现表单数据双向绑定问题
10-18
在Vue中，`v-model`指令被广泛用于实现这一功能，特别是在处理表单输入时。它简化了开发者在视图层和数据模型之间的交互，使得数据的更新能够即时反映到用户界面上。 在传统的`v-model`使用中，我们通常直接在表单...
vue中的v-model原理,与组件自定义v-model详解
10-14
Vue.js中的`v-model`是其核心特性之一，它提供了数据双向绑定的能力，极大地简化了开发者在表单处理中的工作。在Vue中，`v-model`实际上是一个语法糖，它背后是通过`:value`属性来设置元素或组件的值，并通过`@input...
Vue v-model组件封装(类似弹窗组件)
10-15
`v-model` 是 Vue 中的一个核心特性，主要用于双向数据绑定，通常用于表单元素如 input、textarea 等。然而，Vue 也允许开发者将 `v-model` 应用于自定义组件，以实现更复杂的交互。 在标准的 `v-model` 使用中，`v...
vue.js指令v-model实现方法
10-20
Vue.js的`v-model`指令是其核心特性之一，它为开发者提供了数据双向绑定的能力，使得视图与模型之间的交互变得更加简单和直观。在HTML表单元素如`<input>`、`<select>`或`<textarea>`上使用`v-model`，能够实时反映...
VUE v-model表单数据双向绑定完整示例
10-17
主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下
使用Vue.js及Element编写的精度浮点运算计算器源码（打开运行）
12-16
主要是Vue的一些简单应用，难点在于浮点运算。由于javascript的浮点运算是不精确的（对于大多数编程语言都是这样），此程序使用整数来代替浮点数进行运算，最后再转化为浮点数，可以实现对设置范围内（运算范围在程序中为自定义变量range）的浮点运算实现精度运算。
数据类型的转换
SummerJX的博客
04-03 834
一、js数据类型的转换1.把非数值转换为数值：Number()、parseInt()、parseFloat()。eg：[     Number()   ]    var num1=Number("00011");    //11    var num4=Number(true);      //1    [   parseInt()   ]    var num1=parseInt("1234a"...
vue数值限制组件封装（整数、浮点数）
sinat_34849421的博客
03-01 1373
在实际项目中，我们经常会用到编辑框，有时需要对输入做限制和校验。 其中，最频繁的要数数值限制了，比如只能输入整数，范围10~50 再比如只能输入小数，精度为1，范围35.5~40.5等 那么是否可以使用组件来统一处理之类编辑框呢？ 答案是肯定的啦，只需对el-input组件进行扩展即可 el-input用法 官网的说明文档里有设置min和max的属性 Input Attributes 参数 说明 类型 可选值 type 类型 string text，textarea 和其他 原生 in
v-model原理分析一
lznism666的博客
09-14 532
VModel双向绑定分为两个部分的内容 初始化绑定：初始化时给表单绑定值，绑定事件，为双向更新做准备 双向更新：任意一边发生变化，同时能让另一边更新 1. v-model怎么给表单绑定数据 v-model绑定的数据赋值给表单元素的value属性 解析不同的表单元素，配置相对应的事件名和回调，在插入DOM之前，通过addEventListener绑定事件 外部变化，触发事件回调，event.target.value赋值给model绑定的数据 内部变化，修改表单元素的value 下面来看看普通input
Vue限制input仅能输入正整数或浮点数指令
林中明月间丶
11-27 2865
https://zhuanlan.zhihu.com/p/150844281 该指令主要解决了以下问题： v-model同步问题 中文输入法导致input触发了但v-model同步失效 可扩展到其他UI框架下，如element 注意，我们通过手工触发input事件会再次进入指令，如此就成了死循环，所以此处需要判断是否需要去更新v-model，进而确定是不是需要手工去触发事件。 以上代码看上去是ok的，但实际使用时会遇到一个很奇怪的现象：当用中文输入法时，尝试输入中文的字符确实会...
v-model中.number
qq_33250133的博客
05-17 2万+
最近在学习vue记录下踩坑过程: vue官方文档中对于v-model中.number的描述: .number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： <input v-model.number="age" type="number"> 这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。 失败例子(求哪位好心大哥指正错误): &
Vue指令 v-model详解
WangYangsea的博客
07-02 1万+
前言 在一次的学习过程中，偶然发现v-model的一个“奇怪”使用方法，如下图： 描述： 在一个组件中，引入一个自定义组件input.vue。然后需要在父组件中操作input的输入框内容。父组件(index.vue)的子组件实例上定义了v-model；input.vue组件中定义一个props，有一个value值，另外input标签的input事件绑定了一个事件名为input 的 $emit。...
Vue数据类型转换
热门推荐
weixin_43660497的博客
04-25 2万+
vue数据类型转换的问题 典型的String转Number问题。取决于percent属性值是整数还是分数。 1. 转换函数 /整数/parseInt(string) /分数/parseFloat(string) /Number/Number(val) 保留几位小数在方法后面加.toFixed()，比如去分数保留2位小数parseFloat(string).toFixed(2)； 2. 强制类型转换 Boolean(value)——把给定的值转换成Boolean型 Number(value)——把给定
Vue笔记七——v-model表单输入绑定详细介绍
weixin_46351593的博客
01-03 1737
v-model的使用 你可以用 v-model 指令在表单 、 及 `` 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model的基本使用 表单控件在实际开发中时非常常见的。特别是对于用户信息的提交，需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定。 案例解析： 当我们在输入框输入内容时 因为input中的
vue v-model与:model
最新发布
02-02
在Vue中，v-model和:model都是用于实现双向数据绑定的指令，但它们有一些区别。 v-model是v-model:value的缩写形式，通常用于表单元素上。它可以实现子组件到父组件的双向数据绑定，即数据不仅能从data流向页面，还...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值