Vue基础篇（六）
2019-06-17 本文已影响32人
缺月楼
本教程分为三部分 ： 基础 进阶 实战 ，深入浅出Vue.js
基础篇持续 更新中........
第六章 表单与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等注意： 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的
value
<div id="app">
v-model:用法
<input type="text" v-model='value'>
<br> {{value}}
<br>
<hr>
<!-- 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的`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>
<!-- 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的`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>现在选中的是--------->{{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>
复选框：
- 单个复选框，直接用定一个布尔值，可以用
v-model可以用v-bind
2.多个复选框– 如果是组合使用，就需要v-model来配合value使用，v-model绑定一个数组—如果绑定的是字符串，则会转化为true/false，与所有绑定的复选框的
checked属性相对应.
举个栗子：
<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>现在选中的是--------->{{checkname}}
<br>
<hr> 复选框：
<br>单个复选框-----v-bind
<input type="checkbox" v-bind:checked='oneradio'>
<br> 单个复选框-----v-model
<input type="checkbox" v-model='oneradio'>
<hr><br> 多个复选框：
<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>现在选中的是---------{{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: '毛蛋',
//如果只字符串就默认转化为true/false
checks: []
}
})
</script>
下拉框：
- 如果是单选，所绑定的
value值初始化可以为数组，也可以为字符串，有value直接优先匹配一个value值，没有value就匹配一个text值 - 如果是多选，就需要
vmodel来配合value使用，v-model绑定一个数组，与复选框类似 -
v-model一定是绑定在select标签上
<div id="app">
单选的下拉框：
<select name="" id="" v-model="selectde">
<option value="狗蛋">狗蛋</option>
<option value="毛蛋">毛蛋</option>
<option value="翠花">翠花</option>
</select>
<br> 現在選中的是：{{selectde}}
<hr> 多选的下拉框：
<select name="" id="" v-model="selectdenull" multiple>
<option value="狗蛋">狗蛋</option>
<option value="毛蛋">毛蛋</option>
<option value="翠花">翠花</option>
</select>
<br> 現在選中的是：{{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值初始化可以为数组，也可以为字符串，有value直接优 先匹配一个value值， 没有value就匹配一个text值
selectde: [],
selectdenull: ''
}
})
</script>
小结一下 ： 如果是单选，初始化最好给定字符串，因为v-model此时绑定的是静态字符串或者布尔值，如果是多选，初始化最好给定一个数组.
绑定值
单选按钮
只需要用v-bind给单个单选框绑定一个value值，此时，v-model绑定的就是他的value值
复选框
下拉框
在select标签上绑定value值对option并没有影响
看例子
<div id="app" style="margin-bottom: 100px">
绑定值：
<br> 单选按钮 ：
<!-- 只需要用vbind给单个单选框绑定一个value值，此时，vmodel绑定的就是他的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>--------------现在选中的是{{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: '毛蛋',
//如果只字符串就默认转化为true/false
checks: [],
// 如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优 先匹配一个value值， 没有value就匹配一个text值
selectde: '',
selectdenull: [],
//单选按钮绑定v-model是不行的
picked: true,
value: 1111,
toggle: true,
value1: '我被选中',
value2: '位被选中',
valueselect: '',
inputStr: ' '
}
})
</script>
修饰符
lazy
- ——
v-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其在失去焦点或者敲回车键之后在更新
number
- —————— 将输入 的字符串转化为
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>
