v-model的基本使用
message和input双向绑定,其中一方的值发生变化,另一方的值也跟着发生变化
<template>
<div id="app">
<h2>{{message}}</h2>
<input type="text" v-model="message">
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
message: 'hello world'
}
}
}
</script>
运行效果:输入框输入 “你好呀”
v-model的原理
v-model的本质包含两个操作:
- v-bind绑定一个value属性
- v-on给元素绑定一个input事件
<template>
<div id="app">
<h2>{{message}}</h2>
<input type="text" :value="message" @input="message = $event.target.value">
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
message: 'hello world'
}
}
}
</script>
v-model与checkbox结合使用
<template>
<div id="app">
<h3>喜欢:{{like}}</h3>
<label v-for="item in fruit" :key="item">
<input type="checkbox" :value="item" v-model="like" >{{item}}
</label>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
fruit: ['苹果','香蕉','橘子','菠萝','桃子'],
like: []
}
}
}
</script>
运行结果
v-model的修饰符
laze:在输入框失去焦点或敲击回车时才会发生变化
number:v-model在给变量赋值时,默认是string类型,可通过number修饰符改变类型
trim:清除输入时左右两边的空格
<template>
<div id="app">
<h3>{{message}}</h3>
<input type="text" v-model.lazy="message">
<input type="number" v-model.number="age">
<input type="text" v-model.trim="address">
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
message: 'hello world',
age: 18,
address: ''
}
}
}
</script>