Vue.js表单操作

最新推荐文章于 2024-06-04 15:01:35 发布

loneRanger_x

最新推荐文章于 2024-06-04 15:01:35 发布

阅读量3k

点赞数 3

分类专栏： vue 文章标签： Vue.js 表单操作

本文链接：https://blog.csdn.net/qq_36772604/article/details/80804612

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天学习了一下Vue 的表单操作，现在就来记录一下学到了那些东西吧。主要就是对表单各种组件的控制。例如Input，textarea，select等...

用完之后发现果然是方便了不少，之前纯js操作十几行代码才能解决的现在一两行就完事儿。好了，废话不多说，直接开始。

主要用到的就是vue的V-model，这个v-mode呢形象点说就像是一个跟屁虫，你干嘛它就干嘛(组件干嘛它就干嘛)，也就是双向绑定。首先说的呢是input。

Input：

用之前导入它的包，这都不用说。他这提供了专用的包地址，所以我们不用专门去下载，只要连接到这个地址<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>就行了，减轻了我们的负担。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>v-model</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 </head>
 <body>
 <div id="app">
	<p>input 元素：</p>
	<input type="text" placeholder="Edit"  v-model="message" @change="show()"/>
	<p>Input is:{{message}}</p>
	
	<p style="white-space:pre"> textArea 元素：</p>
	<p>{{message2}}</p>
	<textarea v-model="message2" placeholder="input words"></textarea>
	</div>

	<script>
		new Vue({
			el:'#app',
			data:{
				message:'xer',
				message2:'how a wonderful day!'
			},
			methods:{
				show: function(){
					console.log(this.message)
				}
			}
		})
	</script>
 </body>
</html>

效果：

可以看到，你输入什么，在下面就会显示什么。说到这，有时候我们并不想让它这么智能，只想在我们输入完成后再显示。那么这个时候就可以用到.lazy啦。我们只需要修改一下上面代码：

<input type="text" placeholder="Edit"  v-model.lazy="message" @change="show()"/>

效果：

这就实现了，当我们焦点离开输入框下面的label才发生了改变

接下来轮到复选框：

CheckBox：

在学习这个的时候发现是真的很方便就能随心控制他们。所以学的时候就想试试全选取消全选（之前纯js的时候可是费了半天的劲儿才给弄好）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>v-model-checkBox</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 </head>
 <body>
  <div id="app">
	<p> 全选：</p>
	<input type="checkbox" id="allCheck" v-model="checkBox" @change="changeAllChecked()"/>
	<label for="allCheck">{{checkBox}}</label>
	<br>
	<p>多复选框：</p>
	<input type="checkbox" id="naruto" value="Naruto" v-model="checkBoxArray"/>
	<label for="naruto">Naturo</label>
	<input type="checkbox" id="yiqiku" value="Yiqiku" v-model="checkBoxArray"/>
	<label for="yiqiku">Yiqiku</label>
	<input type="checkbox" id="lufi" value="Lufi" v-model="checkBoxArray"/>
	<label for="lufi">Lufi</label>
	<input type="checkbox" id="wukang" value="Wukang" v-model="checkBoxArray"/>
	<label for="wukang">Wukang</label>
	<p>您选择：{{checkBoxArray}}</p>
  </div>

  <script>
	var vm = new Vue({
		el:'#app',
		data:{
			checkBox:false,
			checkBoxArray:[],
			checkAllBox:["Naruto","Yiqiku","Lufi","Wukang"]
		},
		methods:{
			changeAllChecked:function(){
				
				if(this.checkBox){
					this.checkBoxArray = this.checkAllBox
				}else{
					this.checkBoxArray = []
				}
			}
		},
		watch:{
			"checkBoxArray":function(){
				if(this.checkBoxArray.length==this.checkAllBox.length){
					this.checkBox = true
				}else{
					this.checkBox = false
				}
			}
		}
	})
  </script>
 </body>
</html>

效果：

瓦特？这就给实现了？简直不要太轻松！

接下来是radio

Radio：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>v-model-radio</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 </head>
 <body>
	<div id="app">
		<input type="radio" id="study" value="Study"  v-model="radioCheck"/>
		<label for= "study">Studyi</label>
		<input type="radio" id="sleep" value="Sleep"  v-model="radioCheck"/>
		<label for="sleep">Sleepi</label>
		<br>
		<span> 您选择：{{radioCheck}}</span>
	</div>

	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				radioCheck:'Study',
			}
		})
	</script>
 </body>
</html>

效果：

哈哈！如果让你选，你选哪个呢？（我当然选学习了，因为睡觉使我快乐）

最后是select：

Select：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>selectList</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 </head>
 <body>
	<div id="app">
		<select v-model="selected" name="xx">
			<option value="">选择一个</option>
			<option value="Nami">娜美</option>
			<option value="Nibin">尼宾</option>
			<option value="Hankuke">女帝</option>
		</select>

		<span> 您选择：{{selected}}</span>
	</div>

	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				selected:''
			}
		})
	</script>
 </body>
</html>

效果：

哈哈~皮这一下就很舒服，都想选怎么办

好了，到这就告一段落了。

loneRanger_x

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue.js表单操作

今天学习了一下Vue 的表单操作，现在就来记录一下学到了那些东西吧。主要就是对表单各种组件的控制。例如Input，textarea，select等...用完之后发现果然是方便了不少，之前纯js操作十几行代码才能解决的现在一两行就完事儿。好了，废话不多说，直接开始。主要用到的就是vue的V-model，这个v-mode呢形象点说就像是一个跟屁虫，你干嘛它就干嘛(组件干嘛它就干嘛)，也就是双向绑定。首...
复制链接

扫一扫