本教程分為三部分 ： 基礎(chǔ) 進(jìn)階 實戰(zhàn) 迫像，深入淺出Vue.js
基礎(chǔ)篇持續(xù) 更新中........
第六章 表單與v--model
基本用法：
------- v--model:
Vue提供了v--model指令， 用于在表單類元素上雙向綁定事件
一個小栗子
<div id="app">
v-model:用法
<input type="text" v-model='value'>
<br> {{value}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
value: ''
}
})
</script>
效果圖：
效果圖
input和textarea可以用于
input框均唉，以及textarea等注意： 所顯示的值只依賴于所綁定的數(shù)據(jù)是晨，不再關(guān)心初始化時的插入的
value
<div id="app">
v-model:用法
<input type="text" v-model='value'>
<br> {{value}}
<br>
<hr>
<!-- 所顯示的值只依賴于所綁定的數(shù)據(jù)，不再關(guān)心初始化時的插入的`value` -->
<textarea name="" id="" cols="30" rows="10" v-model='msg'>我是多行文本的初始化值</textarea>
<br> {{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
value: '',
msg: ''
}
})
</script>
單選按鈕：
- 單個單選按鈕舔箭，直接用
v--bind綁定一個布爾值罩缴，用v--model是不可以的 - 如果是組合使用，就需要
v--model來配合value使用层扶，綁定選中的單選框的value值箫章，此處所綁定的初始值可以隨意給.
舉個小栗子：
<div id="app">
v-model:用法
<input type="text" v-model='value'>
<br> {{value}}
<br>
<hr>
<!-- 所顯示的值只依賴于所綁定的數(shù)據(jù)，不再關(guān)心初始化時的插入的`value` -->
<textarea name="" id="" cols="30" rows="2" v-model='msg'>我是多行文本的初始化值</textarea>
<br> {{msg}}
<hr>
<br> 單選框：
<br> 單個單選框 ：<input type="radio" v-bind:checked='oneradio'>
<br>
<hr> 多個單選框
<br> 狗蛋： <input type="radio" name="checks" value='狗蛋' v-model='checkname'><br> 毛蛋： <input type="radio" name="checks" value='毛蛋' v-model='checkname'><br> 翠花：<input type="radio" name="checks" value='翠花' v-model='checkname'>
<br>現(xiàn)在選中的是--------->{{checkname}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
value: '',
msg: '',
oneradio: false,
//想要初始化選中 就賦值一個 input中的 value 不賦值就都不選 隨便
checkname: '毛蛋'
}
})
</script>
復(fù)選框：
- 單個復(fù)選框镜会，直接用定一個布爾值檬寂，可以用
v--model可以用v--bind
2.多個復(fù)選框– 如果是組合使用，就需要v--model來配合value使用戳表，v-model綁定一個數(shù)組—如果綁定的是字符串桶至，則會轉(zhuǎn)化為true/false拿诸，與所有綁定的復(fù)選框的
checked屬性相對應(yīng).
舉個栗子：
<div id="app">
<br> 單選框：
<!-- 注意此處用v-model不生效 <input type="radio" v-model='oneradio'>-->
<br> 單個單選框 ----v-bind：<input type="radio" v-bind:checked='oneradio'>
<br>
<hr> 多個單選框
<br> 狗蛋： <input type="radio" name="checks" value='狗蛋' v-model='checkname'><br> 毛蛋： <input type="radio" name="checks" value='毛蛋' v-model='checkname'><br> 翠花：<input type="radio" name="checks" value='翠花' v-model='checkname'>
<br>現(xiàn)在選中的是--------->{{checkname}}
<br>
<hr> 復(fù)選框：
<br>單個復(fù)選框-----v-bind
<input type="checkbox" v-bind:checked='oneradio'>
<br> 單個復(fù)選框-----v-model
<input type="checkbox" v-model='oneradio'>
<hr><br> 多個復(fù)選框：
<br> 毛蛋：
<input type="checkbox" value="毛蛋" v-model='checks'>
<br> 狗蛋：
<input type="checkbox" value="狗蛋" v-model='checks'>
<br> 翠花：
<input type="checkbox" value="翠花" v-model='checks'>
<br>現(xiàn)在選中的是---------{{checks}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
oneradio: false,
//想要初始化選中 就賦值一個 input中的 value 不賦值就都不選 隨便
checkname: '毛蛋',
//如果只字符串就默認(rèn)轉(zhuǎn)化為true/false
checks: []
}
})
</script>
下拉框：
- 如果是單選，所綁定的
value值初始化可以為數(shù)組塞茅，也可以為字符串，有value直接優(yōu)先匹配一個value值季率，沒有value就匹配一個text值 - 如果是多選野瘦，就需要
v-model來配合value使用，v--model綁定一個數(shù)組飒泻，與復(fù)選框類似 -
v--model一定是綁定在select標(biāo)簽上
<div id="app">
單選的下拉框：
<select name="" id="" v-model="selectde">
<option value="狗蛋">狗蛋</option>
<option value="毛蛋">毛蛋</option>
<option value="翠花">翠花</option>
</select>
<br> 現(xiàn)在選中的是：{{selectde}}
<hr> 多選的下拉框：
<select name="" id="" v-model="selectdenull" multiple>
<option value="狗蛋">狗蛋</option>
<option value="毛蛋">毛蛋</option>
<option value="翠花">翠花</option>
</select>
<br> 現(xiàn)在選中的是：{{selectdenull}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
// 如果是單選鞭光，所綁定的value值初始化可以為數(shù)組，也可以為字符串泞遗，有value直接優(yōu) 先匹配一個value值惰许， 沒有value就匹配一個text值
selectde: [],
selectdenull: ''
}
})
</script>
小結(jié)一下 ： 如果是單選，初始化最好給定字符串史辙，因為v--model此時綁定的是靜態(tài)字符串或者布爾值汹买，如果是多選，初始化最好給定一個數(shù)組.
綁定值
單選按鈕
只需要用v--bind給單個單選框綁定一個value值聊倔，此時晦毙，v--model綁定的就是他的value值
復(fù)選框
下拉框
在select標(biāo)簽上綁定value值對option并沒有影響
看例子
<div id="app" style="margin-bottom: 100px">
綁定值：
<br> 單選按鈕 ：
<!-- 只需要用v-bind給單個單選框綁定一個value值，此時耙蔑，v-model綁定的就是他的value值 -->
<input type="radio" v-model="picked" v-bind:value='value'>-------{{picked}}
<br>-------------------------------------- <br> 多選按鈕：需求 選中不選中的value不一樣
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<br> {{toggle}}
<br> 被選中：-{{toggle == value1}}
<br> 位被選中：--{{toggle == value2}}
<br>--------------------------------------<br> 下拉框：
<select v-model='valueselect'>
<option :value="{num:111}">狗蛋</option>
</select>--------------現(xiàn)在選中的是{{typeof valueselect}} {{valueselect.num}}
<br>--------------------------------------<br> 修飾符
<input type="text" v-model="inputStr"> <br>---------{{inputStr}}
<br>
<input type="text" v-model.lazy="inputStr"> <br>---------{{inputStr}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
value: '',
msg: '',
oneradio: false,
//想要初始化選中 就賦值一個 input中的 value 不賦值就都不選 隨便
checkname: '毛蛋',
//如果只字符串就默認(rèn)轉(zhuǎn)化為true/false
checks: [],
// 如果是單選见妒，所綁定的value值初始化可以為數(shù)組，也可以為字符串甸陌，有value直接優(yōu) 先匹配一個value值须揣， 沒有value就匹配一個text值
selectde: '',
selectdenull: [],
//單選按鈕綁定v-model是不行的
picked: true,
value: 1111,
toggle: true,
value1: '我被選中',
value2: '位被選中',
valueselect: '',
inputStr: ' '
}
})
</script>
修飾符
lazy
- ——
v--model默認(rèn)是在input輸入時實時同步輸入框的數(shù)據(jù)，而lazy修飾符钱豁，可以使其在失去焦點或者敲回車鍵之后在更新
number
- —————— 將輸入 的字符串轉(zhuǎn)化為
number類型
trim
*trim自動過濾輸入過程中收尾輸入的空格
看栗子：
<div id="app" style="margin-bottom: 100px">
修飾符
<input type="text" v-model="inputStr"> <br>---------{{inputStr}}
<br> lazy:
<input type="text" v-model.lazy="inputStr"> <br>---------{{inputStr}}
<br> number : <br>
<input type="text" v-model.number="isnum"> <br>---------{{typeof isnum}}
<br> trim : <br>
<input type="text" v-model="trimStr"> <br>---------{{trimStr.split('').length}}
<!-- 加上修飾符對比一下 --><br>
<input type="text" v-model.trim="trimStr1"> <br>---------{{trimStr1.split('').length}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
inputStr: ' ',
isnum: '',
trimStr: '',
trimStr1: ''
}
})
</script>
