Vue.js表单操作
今天学习了一下Vue 的表单操作,现在就来记录一下学到了那些东西吧。主要就是对表单各种组件的控制。例如Input,textarea,select等...用完之后发现果然是方便了不少,之前纯js操作十几行代码才能解决的现在一两行就完事儿。好了,废话不多说,直接开始。主要用到的就是vue的V-model,这个v-mode呢形象点说就像是一个跟屁虫,你干嘛它就干嘛(组件干嘛它就干嘛),也就是双向绑定。首
今天学习了一下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>
效果:
哈哈~皮这一下就很舒服,都想选怎么办
好了,到这就告一段落了。
更多推荐
所有评论(0)