關(guān)于雙向數(shù)據(jù)綁定
Vue 還提供了 v-model 指令，它能輕松實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。
v-model屬性的值是一個數(shù)據(jù)的變量,如果數(shù)據(jù)的值發(fā)生變化,會影響input的值,input的值的變化同時影響數(shù)據(jù)的變化
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>
示例說明:
- 當(dāng)修改數(shù)據(jù)
msg里的內(nèi)容是,input輸入框中的內(nèi)容就會發(fā)生改變. - 當(dāng)修改輸入框中的內(nèi)容時,數(shù)據(jù)也會自動發(fā)生變化
1.1利用其他方式處理模擬雙向數(shù)據(jù)綁定
模擬雙向數(shù)據(jù)綁定來理解v-model治理的核心:
代碼如下:
<!-- vue-app 是根容器 -->
<div id='vue-app'>
<h1> 自定義雙向數(shù)據(jù)綁定 </h1>
<!--通過事件改變data中的數(shù)據(jù)-->
<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指令 雙向數(shù)據(jù)綁定-->
<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>
2 關(guān)于checkbox
對于不能輸入內(nèi)容的表單,比如多選按鈕,如果只有一個,或者有多個,v-model指令會有如何顯示
2.1 checkbox上使用v-model
如果v-model,綁定的是一個字符串,咱們綁定的值,會轉(zhuǎn)成布爾值,
選中就是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>
2.2 沒有value的checkbox上使用v-model綁定數(shù)組
如果綁定的是數(shù)組,則是為了收集選框的內(nèi)容的.
如果標(biāo)簽沒有value,則選中多選按鈕時,,則數(shù)組里收集表單的值為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>
結(jié)果
v-model的checkbox.png
2.3 有value的checkbox上使用v-model綁定數(shù)組
如果有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>
v-model綁定有值的checkbox.png
2.4 此時就可以收集多選按鈕數(shù)據(jù)
<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>
顯示結(jié)果
v-model收集checkbox數(shù)據(jù).png
3 v-model結(jié)合radio類型的使用
3.1 v-model 收集單選數(shù)據(jù)的基本使用
可以使用v-model來收集單選按鈕的數(shù)據(jù)
<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>
示例中,最開始時,沒有默認(rèn)選中項,
3.2 , 設(shè)置默認(rèn)選中項
如果你希望頁面一打開就默認(rèn)選中男或者女
可以在Vue數(shù)據(jù)中用來收集當(dāng)選按鈕數(shù)據(jù)的屬性中添加默認(rèn)值
<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.3 單選按鈕的互斥
正常為了讓兩個單選按鈕擁有互斥功能, 會給單選按鈕添加name屬性,值相同,表示兩個單選按鈕屬于同一組
只用同一組的單選按鈕才會有互斥功能
同樣的, 如果我們使用的v-model雙向數(shù)據(jù)綁定動態(tài)收集單選按鈕數(shù)據(jù), 單選按鈕也會自動變?yōu)榛コ獾?/p>
<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:'男' // 默認(rèn)選中男
}
})
</script>
此時,就算去掉name屬性, 兩個單選按鈕也依然是互斥的,因為雙向綁定的是通過一個數(shù)據(jù)
4 v-model結(jié)合select類型使用
和checkbox一樣, select也分單選和多選
4.1 select單選,只選擇一個值
說明:
-
select如果是單選,意味著每次只能選中一個值. -
select雙向綁定的數(shù)據(jù)應(yīng)該是一個字符串,每次值收集一個數(shù)據(jù) - 如果
select雙向數(shù)據(jù)綁定的數(shù)據(jù)不是字符串,在選中內(nèi)容后,數(shù)據(jù)也會被替換為字符串類型的數(shù)據(jù)
示例代碼
<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為單選,每次只收集一個數(shù)據(jù)
}
})
</script>
示例說明:
- 此時就算你把數(shù)據(jù)中的
fluit的值寫成數(shù)組,當(dāng)你選水果后,fluit值將會被替換為字符串?dāng)?shù)組 - 默認(rèn)是沒有一個水果被選中的,如果有默認(rèn)選中的內(nèi)容, 可以給
fluit數(shù)據(jù)添加默認(rèn)值
4.2 select單選多選,可以同時選中多個值
說明:
-
select標(biāo)簽添加了multiple屬性,讓下拉選擇框變成多選的 -
select一但修改為多選, 意味著雙向數(shù)據(jù)綁定的數(shù)據(jù)要收集多個數(shù)據(jù) - 此時數(shù)據(jù)中用來收集數(shù)據(jù)的屬性值應(yīng)該為數(shù)組
示例代碼:
<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為多選,每次收集一組數(shù)據(jù)
}
})
</script>
示例說明
- 因為是多選,使用數(shù)組來收集內(nèi)容
- 如果要添加默認(rèn)選中,也是使用數(shù)組羅列,如果不是數(shù)組,默認(rèn)值將無效,可以邏輯多個默認(rèn)值
- 如果用來收集數(shù)據(jù)的屬性值不是數(shù)組,在選中內(nèi)容后自動變成數(shù)據(jù)羅列數(shù)據(jù)
