VUE指令-数据绑定v-model

最新推荐文章于 2024-08-26 08:59:48 发布
最新推荐文章于 2024-08-26 08:59:48 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： vue v-model 文章标签： vue v-model
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llzkkk12/article/details/78916847
版权
Vue 的 v-model 指令用于在表单元素上实现双向数据绑定，提供了一种便捷的方式监听并更新数据。v-model 不会理会初始的 HTML 特性值，而是依赖 Vue 实例的数据。它可以用于文本输入框、多行文本、复选框、单选按钮和选择框等。v-model 还支持 .lazy（在 change 事件触发后同步）、.number（将输入值转换为数字）和 .trim（去除首尾空白字符）等修饰符。
摘要由CSDN通过智能技术生成

用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data选项中声明初始值。

VUE框架数据绑定模型(MVVM)

v-model: "xxx" 文本输入框

<!-- 文本输入框<input/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v0.文本输入框</div>

     <hr />

     <div>

         <div>

              <input v-model="v0_message" style="font-size: 20px;"></input>

              <p>{{v0_message}}</p>

         </div>

     </div>

</div>

v-model: "xxx" 多行文本输入

<!-- 多行文本输入框<textarea/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v1.多行文本</div>

     <hr />

     <div>

         <div>

              <textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea>

              <p>{{v0_message}}</p>

         </div>

     </div>

</div>

v-model: "xxx" 复选框

<!-- 复选框<input type="checkbox"/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v2.复选框</div>

     <hr />

     <div>

         <div>

              <input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input>

              <p>{{v1_bool}}</p>

         </div>

     </div>

</div>

v-model: "xxx" 多个复选框

<!-- 多个复选框<input type="checkbox"/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v3.多个复选框</div>

     <hr />

     <div>

         <div>

              <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

              <label for="jack">Jack</label>

              <input type="checkbox" id="john" value="John" v-model="checkedNames">

              <label for="john">John</label>

              <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

              <label for="mike">Mike</label>

              <br>

              <span>Checked names: {{ checkedNames }}</span>

         </div>

     </div>

</div>

v-model: "xxx" 单选按钮

<!-- 单选按钮<input type="radio"/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v4.单选按钮</div>

     <hr />

     <div>

         <div>

              <input type="radio" id="one" value="One" v-model="picked">

              <label for="one">One</label>

              <br>

              <input type="radio" id="two" value="Two" v-model="picked">

              <label for="two">Two</label>

              <br>

              <span>Picked: {{ picked }}</span>

         </div>

     </div>

</div>

v-model: "xxx" 选择框

<!-- 选择框<select/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v5.选择框</div>

     <hr />

     <div>

         <div>

              <select v-model="selected">

                   <option disabled value="">请选择</option>

                   <option>A</option>

                   <option>B</option>

                   <option>C</option>

              </select>

              <span>Selected: {{ selected }}</span>

         </div>

     </div>

</div>

其他用法

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

 

<!DOCTYPE html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../lib/vue.v2.5.12.js"></script>
		<title>v-model</title>
	</head>

	<body style="height: 100%;">
		<style>
			.style0 {
				font-size: 25px;
				color: green;
			}
			
			.style1 {
				background: gold;
			}
		</style>
		<!-- 
			VUE指令v-model数据绑定指令
				
			REF:
				http://www.runoob.com/vue2/vue-forms.html
				https://cn.vuejs.org/v2/guide/forms.html
		-->
		<div id="appVue">
			<!-- 选择框<select/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v5.选择框</div>
				<hr />
				<div>
					<div>
						<select v-model="selected">
							<option disabled value="">请选择</option>
							<option>A</option>
							<option>B</option>
							<option>C</option>
						</select>
						<span>Selected: {{ selected }}</span>
					</div>
				</div>
			</div>

			<!-- 单选按钮<input type="radio"/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v4.单选按钮</div>
				<hr />
				<div>
					<div>
						<input type="radio" id="one" value="One" v-model="picked">
						<label for="one">One</label>
						<br>
						<input type="radio" id="two" value="Two" v-model="picked">
						<label for="two">Two</label>
						<br>
						<span>Picked: {{ picked }}</span>
					</div>
				</div>
			</div>

			<!-- 多个复选框<input type="checkbox"/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v3.多个复选框</div>
				<hr />
				<div>
					<div>
						<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
						<label for="jack">Jack</label>
						<input type="checkbox" id="john" value="John" v-model="checkedNames">
						<label for="john">John</label>
						<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
						<label for="mike">Mike</label>
						<br>
						<span>Checked names: {{ checkedNames }}</span>
					</div>
				</div>
			</div>

			<!-- 复选框<input type="checkbox"/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v2.复选框</div>
				<hr />
				<div>
					<div>
						<input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input>
						<p>{{v1_bool}}</p>
					</div>
				</div>
			</div>

			<!-- 多行文本输入框<textarea/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v1.多行文本</div>
				<hr />
				<div>
					<div>
						<textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea>
						<p>{{v0_message}}</p>
					</div>
				</div>
			</div>

			<!-- 文本输入框<input/> -->
			<!-- 格式v-model="变量" -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v0.文本输入框</div>
				<hr />
				<div>
					<div>
						<input v-model="v0_message" style="font-size: 20px;"></input>
						<p>{{v0_message}}</p>
					</div>
				</div>
			</div>
		</div>
		<script>
			new Vue({
					el: "#appVue",
					data: {
						selected: '',
						picked: '',
						checkedNames: [],
						v1_bool: false,
						v0_message: "还没输入"
					}
				}

			)
		</script>
	</body>

</html>

REF:

http://www.runoob.com/vue2/vue-forms.html

https://cn.vuejs.org/v2/guide/forms.html

llzkkk12
关注
专栏目录
学习vue的第5天，v-for，v-model的原理以及用法等
qq_34176561的博客
05-26 475
购物车，循环遍历，v-for的 购物车价格的小数点 方法是vue自带的过滤器，filters 管道符号 | vue允许自定义过滤器， filters：{ showPrice(传价格){ let pricestr = price.toFixed(2) return `￥${pricestr}` } } 可以进行文本格式化 v-for 原理 <li v-for="item in name"></li> <li v-
vue 入门，v-model数据绑定
05-03
`v-model`是Vue中的一个指令，用于实现双向数据绑定，它使得视图（View）与模型（Model）之间的数据同步变得简单。这种机制让开发者能够在用户界面的表单控件上直接操作数据，同时更新视图，极大地提高了开发效率。 ...
v-model绑定
A12536365214的博客
06-05 1590
通过以下代码我们可以看出v-show是一个条件而且color就是他的命名，下面的input就是v-model用它来将二者绑定在一起，默认的话在他不满足条件的情况下是隐藏状态，script里面的就是固定的，当满足v-show的条件他就会显示。v-model绑定就是将两个元素以某一种形式绑定在一起，下面就让我们看看怎么绑定吧。仅仅只是个人理解，可能不够全面。经过上面的描述，我们来看看效果。不满住条件的情况下是这样的。满足条件的情况下是这样的。这样一看是不是豁然开朗。
Vue使用v-model收集各种表单数据、过滤器
最新发布
Bulut0907
08-26 982
不是必须要用的，用计算属性、method方法也可以实现。不传时间戳，默认就是当前时间。
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
qq_54075517的博客
08-10 5853
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
vue之v-model数据双向绑定
itboy
12-09 601
以下是vue.js中 v-model数据的双向绑定demo: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue demo&lt;/title&gt; &lt;!--引入vue 依赖项--
表单绑定v-model
qq_52135740的博客
07-08 198
表单绑定v-model vue中使用v-model指令来实现表单元素和数据的双向绑定。 v-model原理： 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件 <body> <div id="app"> <input type="text" v-model="message"> <input type="text" v-bind:value="message" v-on:input="val
vue自定v-model实现表单数据双向绑定问题
10-18
总的来说，Vue的`v-model`是实现数据双向绑定的关键，它简化了开发流程，提高了代码的可读性和可维护性。无论是基本的表单元素还是自定义组件，`v-model`都能帮助我们轻松地管理数据流。理解其工作原理对于深入学习...
vue指令之表单控件绑定v-model v-model与v-bind结合使用
10-17
在Vue.js中，`v-model` 是一个非常重要的指令，它实现了双向数据绑定，使得Vue实例的数据和表单控件的值能够实时同步。在HTML表单元素上使用`v-model`，我们可以轻松地处理用户输入，而无需手动编写事件监听器和数据...
vue 表单之通过v-model绑定单选按钮radio
10-17
本文将深入探讨如何使用`v-model`指令来绑定Vue中的单选按钮（radio），以便实现更加高效和简洁的代码编写。 ### 一、基础用法 在Vue中，`v-model`用于在组件和Vue实例的数据之间建立双向绑定。对于单选按钮，我们...
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
12-02
vue.js为开发者提供了很多便利的指令，其中v-model用于表单的数据绑定很常见， 下面是最常见的例子： <input type="text" v-model="msg"> {{msg}} js里data初始化数据 [removed][removed]  ...
双向绑定：v-model
我爱JAVA
08-03 832
v-model 指令是 Vue.js 中实现双向数据绑定的核心指令，它简化了数据与视图之间的同步，提高了开发效率。
5-Vue指令之双向数据绑定 V-model
WinSolstice的博客
07-15 7372
喂你吃一口 v-model 的语法糖 v-model 指令用来在 、 、 text、 checkbox、radio 等表单控件元素上创建双向数据绑定 它会根据控件类型自动选取正确的方法来更新元素 这样说有些神奇，但 v-model 本质上不过是语法糖： 它负责监听用户的输入事件以更新数据，并处理一些极端的例子 语法糖 语法糖（Syntactic sugar），也译为糖衣语法，指计算机语言中
Vue-05-v-model 双向绑定
wsssq_的博客
04-23 3192
表单绑定 v-model 、值绑定、v-model 修饰符
vue变量绑定：v-model功能
viviliving的专栏
08-31 450
template <template> <div> <!-- 显示　this.my_value 这个变量 --> <p>页面上的值: {{my_value1}} </p> <p> 通过视图层，修改my_value: </p> <input v-model="my_value1" style='width: 400px' /> <hr
v-model双向绑定介绍
daimengdeyang的博客
07-02 446
介绍Vue.js中v-model的原理与使用
Vue的MVVM模型和数据绑定
weixin_47404925的博客
04-07 472
Vue的MVVM模型和数据绑定 MVVM模式 ViewModel能够观察到数据的变化，并对视图对应的内容进行更新 ViewModel能够监听到视图的变化，并能够通知数据发生改变 Vue.js使用 （1）、轻量级，体积小是一个重要指标 （2）、移动优先，更适合移动端 （3）、易上手，学习曲线平稳，文档齐全 （4）、吸取了Angular（模块化）和React（虚拟DOM）长处，并拥有自己独特的功能。如：计算属性 （5）、开源，社区活跃度高 什么是MVVM MVVM是一种软件架构设计模式，由微软WPF和Silve
Vue表单绑定v-model
愤怒的小兵
03-03 1002
Vue表单绑定v-model基础用法绑定text绑定textarea绑定checkbox单个复选框多个复选框绑定radio绑定select单个select多个selectv-for渲染绑定value 基础用法 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 dat...
vue数据双向绑定模型
weixin_56122911的博客
01-22 219
vue的常见的问题
vue v-model绑定v-for
04-21
在Vue中，v-model指令用于实现双向数据绑定，而v-for指令用于循环渲染列表。当它们结合使用时，可以实现对循环列表中每个元素的双向数据绑定。 具体实现方式如下： 1. 首先，使用v-for指令循环遍历一个数组或对象，生成多个元素。 2. 在循环生成的每个元素上使用v-model指令，将元素与数据进行双向绑定。 例如，假设有一个包含多个输入框的表单，我们可以使用v-for指令循环渲染这些输入框，并使用v-model指令将每个输入框与对应的数据进行双向绑定。示例代码如下： ```html <template> <div> <div v-for="(item, index) in items" :key="index"> <input v-model="item.value" type="text"> </div> </div> </template> <script> export default { data() { return { items: [ { value: 'item 1' }, { value: 'item 2' }, { value: 'item 3' } ] }; } }; </script> ``` 在上述示例中，我们使用v-for指令循环渲染了一个包含三个输入框的表单。每个输入框通过v-model指令与对应的数据项进行双向绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值