文章目錄
基本概念
表單控件在實際開發中是很常見的,Vue中使用v-model指令來實現表單元素和數據的雙向綁定
基本使用
最重要的特徵是表單元素和數據的雙向綁定
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello world"
}
})
</script>
</body>
v-model原理
- 實現雙向綁定的原理 相當於兩個指令的集合。分別是v-on和v-bind
- v-model其實是一個語法糖,它本質上包含兩個操作:
(1)v-bind綁定一個Value屬性
(2)v-on指令給當前元素綁定input事件
使用v-bind
只使用v-bind只能實現數據響應
<body>
<div id="app">
//<!-- 只使用v-bind-->
<input type="text" :value="message" >
{{message}}
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello world"
}
})
</script>
</body>
v-bind和v-on同時使用
v-bind和v-on同時使用與v-model效果相同
(1)當輸入框輸入內容時,因爲input中的v-model綁定了message,所以會實時將輸入的內容傳遞給message,message發生改變
(2)message發生改變時,因爲使用了Mustache語法,於是將message的值插入到DOM中,DOM發生響應的改變
<body>
<div id="app">
//<!-- @input監聽用戶輸入-->
<input type="text" :value="message" @input="change">
<input type="text" :value="message" @input="message = $event.target.value">
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello world"
},
methods:{
//事件對象
change(event) {
this.message = event.target.value;
}
}
})
</script>
</body>
v-model結合radio使用
具體詳解請看註釋
<body>
<div id="app">
//<!-- 可以省略name -->
<label for="man">
<input type="radio" id="man" value="男" v-model="sex">男
</label>
<label for="woman">
<input type="radio" id="woman" value="女" v-model="sex">女
</label>
<h2>您的選擇是:{{sex}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
//默認選中。也可以沒有默認選中,則爲空
sex:"男"
},
})
</script>
v-model結合checkbox使用
單選框
具體詳解請看註釋
<body>
<div id="app">
//<!-- 單選框 -->
<label for="agreement">
<input type="checkbox" name="" id="agreement" v-model="isagree">同意協議
</label>
<h2>您選擇的是:{{isagree}}</h2>
//動態綁定disabled屬性
<button :disabled="!isagree">下一步</button>
<br>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
//設置默認值
isagree:false
},
})
</script>
</body>
多選框
<body>
<div id="app">
//<!-- 多選框 -->
<input type="checkbox" value="籃球" v-model="hobbies">籃球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的愛好選擇是:{{hobbies}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
//可以設置默認值
hobbies:["足球"]
}
})
</script>
</body>
v-model結合select使用
select 同 checkbox 相類似,同樣有單選和多選的區別
<body>
<div id="app">
// <!-- 單選 -->
<select name="habit" v-model="hobby">
<option value="籃球" >籃球</option>
<option value="足球" >足球</option>
<option value="羽毛球">羽毛球</option>
</select>
<h2>您最喜歡的運動是:{{hobby}}</h2>
// <!-- 多選 -->
<select name="habit" v-model="hobbies" multiple >
<option value="籃球" >籃球</option>
<option value="足球" >足球</option>
<option value="羽毛球">羽毛球</option>
</select>
<h2>您最喜歡的運動有:{{hobbies}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
hobby:'',
//可以設置默認值
hobbies:["足球"]
}
})
</script>
</body>
值綁定
值綁定就是動態地給value賦值。
在上面的例子中,input的value值都是在定義input的時候直接給定的。但在真實開發中,這些value值可能是從網絡後臺上獲取或定義在data中的。所以我們就需要通過v-bind:value動態地給value賦值,看例子
<body>
<div id="app">
<span v-for="hobby in arr">
<input type="checkbox" :value="hobby" :id="hobby" v-model="hobbies" >{{hobby}}
</span>
<h2>您最喜歡的運動有:{{hobbies}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
//數據由data定義
arr:["足球","籃球","羽毛球"],
hobbies:[]
}
})
</script>
</body>
v-model修飾符
lazy修飾符
(1)默認情況下,v-model默認是在input事件中同步輸入框的數據的,即一旦有數據發生改變時,對應的data中的數據就會自動發生改變
(2)lazy修飾符可以讓數據在失去焦點或者回車時纔會更新
<body>
<div id="app">
//未使用修飾符
<input type="text" v-model="message1">
<h2>{{message1}}</h2>
//使用修飾符
<input type="text" v-model.lazy="message2">
<h2>{{message2}}</h2>
</div>
<script src="../vue.js"></script>
<script
var app = new Vue({
el:'#app',
data:{
message1:"hello1",
message2:"hello2"
}
})
</script>
</body>
number修飾符
(1)默認情況下,在輸入框中無論我們輸入的時字母還是數字,都會被當作字符串類型進行處理
(2)如果我們希望處理的是數字類型,那麼最好直接將內容當作數字處理
(3)number修飾符可以讓在輸入框中輸入的內容自動轉成數字類型
<body>
<div id="app">
//未使用修飾符
<input type="number" v-model="num1">
<h2>{{num1}}-{{typeof num1}}</h2>
//使用修飾符
<input type="number" v-model.number="num2">
<h2>{{num2}}-{{typeof num2}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
num1:0,
num2:0
}
})
</script>
</body>
trim修飾符
(1)如果輸入的內容首尾有很多空格,通常我們希望將其去除
(2)trim修飾符可以過濾內容左右兩邊的空格
<body>
<div id="app">
//未使用修飾符
<input type="text" v-model="name1">
<h2>{{name1}}</h2>
//使用修飾符
<input type="text" v-model.trim="name2">
<h2>{{name2}}</h2>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
name1:'',
name2:''
}
})
</script>
</body>