vue中v-model的应用及使用详解

程序员文章站 2022-03-21 20:41:25

vue中经常使用到和

这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jquery有些区别。vue使用v...</div>
					<div class="content">
						<p>vue中经常使用到<input>和<textarea>这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jquery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。</p>
<p>    v-model本质上是一个语法糖。如下代码<code><input v-model="test"></code>本质上是<<code>input :value="test" @input="test = $event.target.value"></code>，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入<p>{{ test}}</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变。</p>
<div class="jb51code">
<pre class="brush:js;">
<div id="app">
  <input v-model="test">
  
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new vue({
    el: '#app',
    data: {
      test: '这是一个测试'
    }
  });
</script></pre>
</div>
<p><span style="color: #ff0000"><strong>1.v-model在input的下拉框、单选按钮、复选框中的应用</strong></span></p>
<p>    如下面代码，分别是v-model在input不同的组件中的应用，但是大体用法相同。注意：像下面代码中复选框这样需要接收多条数据的情况下，在data里面应该由数组与其对应二不是字符串。</p>
<p>    这里有一个值绑定的问题，不管是下拉框或者单选按钮还是复选框，我们都可以在对应的标签内设置value。以下拉框为例，我们在<option>中添加了vulue=“a被选”，当我们选择第一个下拉框a的时候，在selected中的字符串为‘a被选'，如果我们不在<option>中设置value值的话那么selected中的字符串将是<option>中的值‘a'。</p>
<p>    这里还有一个和vue无关的问题，比较简单，但是由于平时主要做后台java开发没太注意这个前端问题。以下面的单选按钮代码为例，<label>标签内有一个for元素与input中的id值对应(两个值相同)，刚开始不太理解为什么这么写，这个对前端人员来说应该是一个很简单的问题。这样写的目的没有其它任何作用，只是label元素为鼠标改进了可用性，在点击label的时候也相当于点击了对应的input控件，点击label标签也可以触发input标签控件。例如单选按钮在加了for之后点击small也可以选择对应按钮，但是如果不加for是没有任何反应的。<br></p>
<div class="jb51code">
<pre class="brush:js;">

<div id="app">
  <select v-model="selected">
    <option value="a被选">a</option>
    <option value="b被选">b</option>
    <option value="c被选">c</option>
  </select>
  <span>selected: {{ selected }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new vue({
    el: '#app',
    data: {
      selected: ''
    }
  });
</script>

<div id="app">
  <input type="radio" id="small" value="small_value" v-model="picked">
  <label for="small">small</label>
  <br>
  <input type="radio" id="big" value="big_value" v-model="picked">
  <label for="big">big</label>
  <br>
  <span>picked: {{ picked }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new vue({
    el: '#app',
    data: {
      picked: ''
    }
  })
</script>

<div id="app">
  <input type="checkbox" id="one" value="value_one" v-model.lazy="checkednames">
  <label for="one">选项一</label>
  <input type="checkbox" id="two" value="value_two" v-model.lazy="checkednames">
  <label for="two">选项二</label>
  <input type="checkbox" id="three" value="value_three" v-model.lazy="checkednames">
  <label for="three">选项三</label>
  <br>
  <span>checked names: {{ checkednames }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new vue({
    el: '#app',
    data: {
      checkednames: []
    }
  })
</script></pre>
</div>
<p><span style="color: #ff0000"><strong>2.v-model修饰符</strong></span></p>
<p>    v-model也可以和.lazy、.trim和.number这些修饰符一起使用。</p>
<div class="jb51code">
<pre class="brush:js;">
  
  <input v-model.lazy="msg" >
  
  <input v-model.trim="msg">
  
  <input v-model.number="age" type="number"></pre>
</div>
<p>    .trim和.number的用法比较简单，这里就不做过多解释。.lazy相当于一个延迟加载的过程。在上面我们讲过<input v-model="test">相当于一个语法糖<code><input :value="test" @input="test = $event.target.value">，</code>而<code><input v-model.lazy="msg" ></code>则相当将input的实时更新改为一个change事件，v-model.lazy只有当焦点移除input时才会触发事件。下图1位v-model效果，图2位v-model.lazy效果。</p>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MDQvYl8wXzIwMTkwNjA0MjMxMzI0NDcwOS5wbmc=" alt="vue中v-model的应用及使用详解" title="vue中v-model的应用及使用详解"></p>
<p><span style="color: #ff0000"><strong>下面在单独给大家介绍下vue中v-model使用</strong></span></p>
<p>v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：</p>
<p>  1. v-bind绑定一个value属性</p>
<p>  2. v-on指令给当前元素绑定input事件</p>
<p>自定义组件使用v-model，应该有以下操作：</p>
<p>1. 接收一个value prop</p>
<p>2. 触发input事件，并传入新值</p>
<p>在原生表单元素中：</p>
<div class="jb51code">
<pre class="brush:js;">
<input v-model="inputvalue"></pre>
</div>
<p>相当于</p>
<div class="jb51code">
<pre class="brush:js;">
<input v-bind:value="inputvalue" v-on:input="inputvalue = $event.target.value"></pre>
</div>
<p>在自定义组件中</p>
<div class="jb51code">
<pre class="brush:js;">
<my-component v-model="inputvalue"></my-component></pre>
</div>
<p>相当于</p>
<div class="jb51code">
<pre class="brush:js;">
<my-component v-bind:value="inputvalue" v-on:input="inputvalue = argument[0]"></my-component></pre>
</div>
<p>这个时候，inputvalue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。</p>
<div class="jb51code">
<pre class="brush:js;">
this.$emit('input', value)</pre>
</div>
<p><span style="color: #ff0000"><strong>总结</strong></span><br></p>
<p>以上所述是小编给大家介绍的vue中v-model的应用及使用详解，希望对大家有所帮助

</p>					</div>
																				<div class="info-pre-next">
						<p>
							上一篇：							<a href="/article/277587.html">
								苹果和虫子问题C++							</a>
						</p>
						<p>
							下一篇：							<a href="/article/277589.html">
								Golang 探索对Goroutine的控制方法							</a>
						</p>
					</div>
															<div class="wz_tuijian">
						<p>
							推荐阅读						</p>
						<ul>
														<li>
								<a href="/article/2267852.html" target="_blank" title="深入解析Vue.js中v-bind v-model的使用和区别">
									<h2>
										深入解析Vue.js中v-bind v-model的使用和区别									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2267241.html" target="_blank" title="Vue中的组件及路由使用实例代码详解">
									<h2>
										Vue中的组件及路由使用实例代码详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2256081.html" target="_blank" title="详解iOS App中UISwitch开关组件的基本创建及使用方法">
									<h2>
										详解iOS App中UISwitch开关组件的基本创建及使用方法									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2255756.html" target="_blank" title="深入解析Vue.js中v-bind v-model的使用和区别">
									<h2>
										深入解析Vue.js中v-bind v-model的使用和区别									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2253665.html" target="_blank" title="详解C#中的System.Timers.Timer定时器的使用和定时自动清理内存应用">
									<h2>
										详解C#中的System.Timers.Timer定时器的使用和定时自动清理内存应用									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2237892.html" target="_blank" title="vue中的watch监听数据变化及watch中各属性的详解">
									<h2>
										vue中的watch监听数据变化及watch中各属性的详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2231162.html" target="_blank" title="详解iOS应用的设计模式开发中Mediator中介者模式的使用">
									<h2>
										详解iOS应用的设计模式开发中Mediator中介者模式的使用									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2231010.html" target="_blank" title="Android中ViewFlipper的使用及设置动画效果实例详解">
									<h2>
										Android中ViewFlipper的使用及设置动画效果实例详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2225180.html" target="_blank" title="vue中$refs, $emit, $on, $once, $off的使用详解">
									<h2>
										vue中$refs, $emit, $on, $once, $off的使用详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2224897.html" target="_blank" title="详解iOS应用开发中使用设计模式中的抽象工厂模式">
									<h2>
										详解iOS应用开发中使用设计模式中的抽象工厂模式									</h2>
								</a>
							</li>
													</ul>
					</div>
									</article>
			</div>
            			
		</main>
		<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer>	</body>
	</html>