Vue 還提供了 v-model 指令，它能輕松實現表單輸入和應用狀态之間的雙向綁定。
v-model屬性的值是一個數據的變量,如果數據的值發生變化,會影響input的值,input的值的變化同時影響數據的變化
1 v-model 指令的基本使用示例代碼如下:
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
}
})
</script>
示例說明:
模拟雙向數據綁定來理解v-model治理的核心:代碼如下:
<!-- vue-app 是根容器 -->
<div id='vue-app'>
<h1> 自定義雙向數據綁定 </h1>
<!--通過事件改變data中的數據-->
<div>
<label>姓名：</label>
<!--通過ref獲取DOM元素-->
<!-- 通過v-bind綁定value值 -->
<input ref='name' type="text" :value="name" v-on:keyup="logName">
<span>{{ name }}</span>
</div>
<!--Vue的v-model指令 雙向數據綁定-->
<div>
<label>年齡：</label>
<input type="text" v-model="age">
<span>{{ age }}</span>
</div>
</div>
<script>
//實例化Vue對象
new Vue({
el: "#vue-app",
data: {
name: "",
age: ""
},
methods: {
logName: function () {
this.name = this.$refs.name.value;
}
}
})
</script>
對于不能輸入内容的表單,比如多選按鈕,如果隻有一個,或者有多個,v-model指令會有如何顯示
2.1 checkbox上使用v-model如果v-model,綁定的是一個字符串,咱們綁定的值,會轉成布爾值,
選中就是true,不選擇就是false
<div id="app">
<input type="checkbox" v-model="val">
{{val}} <!--true 或者 false-->
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({ // 根實例
el: '#app',
data: {
val: '',
},
})
</script>
如果綁定的是數組,則是為了收集選框的内容的.
如果标簽沒有value,則選中多選按鈕時,,則數組裡收集表單的值為null, 未選中,收集的值為空
<div id="app">
<input type="checkbox" v-model="val">
{{val}} <!-- 此時的值為 未選中[] 或者 選中 [null] -->
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({ // 根實例
el: '#app',
data: {
val: [],
},
})
</script>
結果
如果有value屬性,那麼選中取出的是value的值,未選中則為空
<div id="app">
<input type="checkbox" v-model="val" value='wuwei'>
{{val}} <!-- 此時的值為 未選中[] 或者 選中 [wuwei] -->
</div>
<script>
var vm = new Vue({ // 根實例
el: '#app',
data: {
val: [],
},
})
</script>
<div id="app">
<input type="checkbox" v-model="val" value='小明'>
<input type="checkbox" v-model="val" value='小紅'>
<input type="checkbox" v-model="val" value='張三'>
{{val}} <!-- 此時的值為 未選中[] -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: [],
},
})
</script>
顯示結果
可以使用v-model來收集單選按鈕的數據
<div id="app">
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex" />男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex"/>女
</label>
<h2>你選擇的性别是:{{ sex }}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
sex:''
}
})
</script>
示例中,最開始時,沒有默認選中項,
3.2 , 設置默認選中項如果你希望頁面一打開就默認選中男或者女
可以在Vue數據中用來收集當選按鈕數據的屬性中添加默認值
<div id="app">
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex" />男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex"/>女
</label>
<h2>你選擇的性别是:{{ sex }}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
sex:'男'
}
})
</script>
正常為了讓兩個單選按鈕擁有互斥功能, 會給單選按鈕添加name屬性,值相同,表示兩個單選按鈕屬于同一組
隻用同一組的單選按鈕才會有互斥功能
同樣的, 如果我們使用的v-model雙向數據綁定動态收集單選按鈕數據, 單選按鈕也會自動變為互斥的
<div id="app">
<label for="male">
<input type="radio" id="male" value="男" v-model="sex" />男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex"/>女
</label>
<h2>你選擇的性别是:{{ sex }}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
sex:'男' // 默認選中男
}
})
</script>
此時,就算去掉name屬性, 兩個單選按鈕也依然是互斥的,因為雙向綁定的是通過一個數據
4 v-model結合select類型使用和checkbox一樣, select也分單選和多選
4.1 select單選,隻選擇一個值說明:
示例代碼
<div id="app">
<select name="fluit" v-model="fluit">
<option value="蘋果">蘋果</option>
<option value="梨子">梨子</option>
<option value="香蕉">香蕉</option>
<option value="提子">提子</option>
<option value="葡萄">葡萄</option>
</select>
<h2>你選擇水果是:{{ fluit }}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
fluit:'' // select為單選,每次隻收集一個數據
}
})
</script>
示例說明:
說明:
示例代碼:
<div id="app">
<select name="fluit" v-model="fluits" multiple>
<option value="蘋果">蘋果</option>
<option value="梨子">梨子</option>
<option value="香蕉">香蕉</option>
<option value="提子">提子</option>
<option value="葡萄">葡萄</option>
</select>
<h2>你選擇水果是:{{ fluits }}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
fluits:[] // select為多選,每次收集一組數據
}
})
</script>
示例說明
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
