详解vue表单——小白速看

程序员文章站 2022-06-20 23:27:21

一、基本用法你可以用 v-model 指令在表单及

元素上创建双向数据绑定。
但 v-model 本质...</div>
					<div class="content">
						<p><span style="color: #ff0000"><strong>一、基本用法</strong></span></p>
<p>你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。</p>
<p>但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p>
<p>v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 vue 实例的数据作为数据来源。你应该通过 javascript 在组件的 data 选项中声明初始值。</p>
<p>一组代码，看完text、textarea、radio、checkbox、select的基本用法：</p>
<div class="jb51code">
<pre class="brush:js;">
<div id="app7">
  <input type="text" v-model="message"><label>{{message}}</label></br>
  <textarea v-model="message1"></textarea><label>{{message1}}</label></br>
  
  <input type="radio" :checked="picked"><label>单选按钮</label></br>
  
  <input type="radio" v-model="sex" value="boy"><label>男</label>
  <input type="radio" v-model="sex" value="girl"><label>女</label></br>
  
  <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>
  <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>
  <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>
  
  
  <select v-model="select">
   <option disabled value="">请选择</option>
   <option>html</option>
   <option value="js">javascript</option>
   <option>css</option>
  </select>
  
  <select v-model="selected">
   <option v-for="option in options" :value="option.value">
    {{option.text}}
   </option>
  </select>
 </div>

var app7 = new vue({
 el: '#app7',
 data:{
  message: '单行文本',
  message1: '多行文本',
  picked: true,
  sex: 'boy',
  hobby: ['爬山','滑雪'],
  select: 'css',
  selected: 'a',
  options: [
   { text: 'one', value: 'a' },
   { text: 'two', value: 'b' },
   { text: 'three', value: 'c' }
  ]
 }
});</pre>
</div>
<p><span style="color: #ff0000"><strong>二、值绑定</strong></span></p>
<p>单选按钮、复选框和选择列表在单独使用或单选的模式下， v-model 绑定的值是一个静态字符串或布尔值， 但在业务中，有时需要绑定一个动态的数据， 这时可以用v-bind 来实现。</p>
<p>一组代码，看完表单常用radio、checkbox、select的值绑定：</p>
<div class="jb51code">
<pre class="brush:js;">
 <div id="app8">
  
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>

<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label>复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>

<select v-model="selected">
   <option :value="{number:123}">123</option>
  </select>
  {{selected.number}}
 </div>

</p>					</div>
																				<div class="info-pre-next">
						<p>
							上一篇：							<a href="/article/1473900.html">
								VUE实现日历组件功能							</a>
						</p>
						<p>
							下一篇：							<a href="/article/1473902.html">
								vuex 项目结构目录及一些简单配置介绍							</a>
						</p>
					</div>
															<div class="wz_tuijian">
						<p>
							推荐阅读						</p>
						<ul>
														<li>
								<a href="/article/2112402.html" target="_blank" title="详解vue表单——小白速看">
									<h2>
										详解vue表单——小白速看									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2039055.html" target="_blank" title="详解vue表单验证组件 v-verify-plugin">
									<h2>
										详解vue表单验证组件 v-verify-plugin									</h2>
								</a>
							</li>
														<li>
								<a href="/article/1989715.html" target="_blank" title="Vue.js事件处理器与表单控件绑定详解">
									<h2>
										Vue.js事件处理器与表单控件绑定详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/1951178.html" target="_blank" title="Vue.js实现可配置的登录表单代码详解">
									<h2>
										Vue.js实现可配置的登录表单代码详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/1921494.html" target="_blank" title="Vue之表单事件数据绑定详解">
									<h2>
										Vue之表单事件数据绑定详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/1916563.html" target="_blank" title="Vue2.0表单校验组件vee-validate的使用详解">
									<h2>
										Vue2.0表单校验组件vee-validate的使用详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/1820687.html" target="_blank" title="Vue表单控件绑定图文详解">
									<h2>
										Vue表单控件绑定图文详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/1720563.html" target="_blank" title="详解Vue里循环form表单项实例">
									<h2>
										详解Vue里循环form表单项实例									</h2>
								</a>
							</li>
														<li>
								<a href="/article/1681112.html" target="_blank" title="vue计算属性详解——小白速会">
									<h2>
										vue计算属性详解——小白速会									</h2>
								</a>
							</li>
														<li>
								<a href="/article/1681004.html" target="_blank" title="vue内置指令详解——小白速会">
									<h2>
										vue内置指令详解——小白速会									</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>