6.1 基本用法
v-model:
VUE提供了v-model指令， 用于在表单类元素上双向绑定事件
input和textarea
可以用于input框，以及textarea等
注意： 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value
<!--只要使用了v-model绑定了数据，你初始化显示的值，都只与你在data里对应的属性的值有关，与其他无关-->
输入框:<input type="text" v-model="msg"> <br>
{{msg}} <br>
多行文本：<textarea name="" id="" cols="30" rows="10" v-model="value">当你使用v-model绑定了数据我就不会显示</textarea>
{{value}}
data: {
msg: '输入你的信息',
value: ''
}
单选按钮：
- 单个单选按钮，直接用v-bind绑定一个布尔值，用vmodel是不可以的
单个单选按钮： <input type="radio" :checked="checked">
data: {
checked: false
}
- 如果是组合使用，就需要v-model来配合value使用，绑定选中的单选框的value值，此处所绑定的初始值可以随意给
多个单选按钮：（v-model绑定的是被选中的单选按钮的value值，就比如下面data里的checkvalue是大毛，那么就是默认选中大毛）
<input type="radio" name="checks" value="大毛" v-model="checkvalue">大毛
<input type="radio" name="checks" value="二毛" v-model="checkvalue">二毛
<input type="radio" name="checks" value="三毛" v-model="checkvalue">三毛 <br>
{{checkvalue}}
data: {
checkvalue: '大毛'
}
复选框
- 单个复选框，直接绑定一个布尔值，可以用v-model可以用vbind
单个复选框：--用v-bind:<input type="checkbox" :checked="checked"> <br>
单个复选框：--用v-model:<input type="checkbox" v-model="checked"> <br>
data: {
checked: true
}
- 多个复选框– 如果是组合使用，就需要v-model来配合value使用，v-model绑定一个数组—如果绑定的是字符串，则会转化为true和false，与所有绑定的复选框的checked属性相对应
多个复选框： <br>
<input type="checkbox" value="大毛" v-model="checkboxs"> 大毛
<input type="checkbox" value="二毛" v-model="checkboxs"> 二毛
<input type="checkbox" value="三毛" v-model="checkboxs"> 三毛 <br>
现在选中了：{{checkboxs}}
data: {
checkboxs: ''
}
上面v-model绑定的checkboxs是一个字符串，所以在页面中与之对应的{{checkboxs}}里面显示的是checked的属性，选中的情况下就是true否则就是false
image.png
data: {
checkboxs: []
}
上面代码如果你绑定的checkboxs是数组，那么页面就会显示对应的复选框的value
image.png
下拉框：
- 如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优先匹配一个value值，没有value就匹配一个text值
- 如果是多选，就需要v-model来配合value使用，v-model绑定一个数组，与复选框类似
- v-model一定是绑定在select标签上
下拉框： <br>
单选下拉框： <br>
<select v-model="selected">
<option value="大毛">大毛</option>
<option value="二毛">二毛</option>
<option value="三毛">三毛</option>
</select>
你选中的是：{{selected}}
<br>
<br>
多选下拉框： <br>
<select v-model="selectedmul" multiple>
<option value="大毛">大毛</option>
<option value="二毛">二毛</option>
<option value="三毛">三毛</option>
</select>
你选中的是：{{selectedmul}}
data: {
selected: '',
selectedmul: []
}
image.png
总结一下：
如果是单选，初始化最好给定字符串，因为v-model此时绑定的是静态字符串或者布尔值
如果是多选，初始化最好给定一个数组
6.2 绑定值
- 单选按钮
只需要用v-bind给单个单选框绑定一个value值，此时，vmodel绑定的就是他的value值
<input type="radio" v-model="inputValue" :value="value"> {{inputValue}}
data: {
inputValue: true,
value: '1111'
}
上面代码{{inputValue}}一开始渲染为true，当你选中按钮就变成了1111
image.png
- 复选框
通过true-value和false-value来设置选中的时候和未选中时的value值
<input type="checkbox" v-model="picked" :true-value="value1" :false-value="value2">
-----{{picked}}
data: {
picked: true,
value1: '我被选中了',
value2: '我没被选中'
}
上面代码默认一开始打开页面复选框被选中，{{picked}}的值为true，当点击复选框的时候取消选中状态{{picked}}变为‘我没被选中’，再次点击选中，值为‘我被选中了’
- 下拉框
在select标签上绑定value值对option并没有影响
6.3 修饰符
- lazy
v-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其在失去焦点或者敲回车键之后再更新
<input v-model.lazy="msg" >
{{msg}}
- number
将输入 的字符串转化为number类型
<input v-model="msg" >
{{msg}}
上面代码尽管你输入的是数字，但实际上input里面的都是字符串
image.png
如果想要得到number类型，就要使用
<input v-model.number="msg" >
image.png
- trim
trim自动过滤输入过程中收尾输入的空格
<input v-model.trim="msg">
自定义组件中的使用
- 父组件
<test v-model="childName"/>
<script>
export default {
data() {
return { childName: '2222'}
}
}
</script>
- 子组件
<template>
<div>
<input :value="current" @input="onInput"/>
</div>
</template>
<script>
export default {
name: 'Test',
model: {
prop: 'current',
event: 'input'
},
props: {
current: String
},
methods: {
onInput(event) {
this.$emit('input', event.target.value)
}
}
}
</script>
.sync
- 父组件
<template>
<div>
Test
<Child :count="count" @update:count="updateCount"/>
// 等价于
//<Child :count="count" @update:count="count = $event"/>
// 等价于
<Child :count.sync="count" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
name: 'Test',
components: {
Child,
},
data() {
return {
count: 0,
}
},
created() {
},
methods: {
updateCount(count) {
this.count = count
}
}
}
</script>
- 子组件
<template>
<div>
<div>{{count}}</div>
<button @click="handleChange">点我</button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
count: {
type: Number
},
},
methods: {
handleChange() {
this.$emit('update:count', 2)
}
}
}
</script>
