一、背景
1、表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
2、Vue中使用v-model指令来实现表单元素和数据的双向绑定。
二、案例的解析
当我们在输入框输入内容时因为input中的v-mode|绑定了message ,所以会实时将输入的
内容传递给message , message发生改变。
当message发生改变时, 因为上面我们使用Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变。所以,通过v-model实现了双向的绑定。
代码.png
当然,我们也可以将v-model用于textarea元素 如下图
代码块.png
三、原理
v-model其实是一 个语法糖,它的背后本质上是包含两个操作:
01.v-bind绑定一个value属性
02.v-on指令给当前元素绑定input事件
也就是说下面的代码:等同于下面的代码:
<input type= "text" v-model="message">
!--等同于下面-->
<input type="text" v-bind: value="message" v-on :input="message = $event . target. value">
!--等同于下面-->
<input type="text" v-bind : value= "message" v-on: input= "message = $event. target. value">
四 、v-model 与radio 结合使用
案例：做个单选框时
代码：
<template>
<div class="hello">
<label for="man">
<input type="radio" value="男" name="sex" id="man" v-model="sex"> 男
</label>
<label for="woman">
<input type="radio" value="女" name="sex" id="woman" v-model="sex"> 女
</label>
<h2>选择的性别是：{{sex}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
sex: '男'//默认选择
}
},
}
</script>
如上代码，如果没有 v-model时 只有加上name 属性且属性值一样才能互斥
加上v-model时 name属性可以直接去掉 如下代码
<template>
<div class="hello">
<label for="man">
<input type="radio" value="男" id="man" v-model="sex"> 男
</label>
<label for="woman">
<input type="radio" value="女" id="woman" v-model="sex"> 女
</label>
<h2>选择的性别是：{{sex}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
sex: '男'//默认选择
}
},
}
</script>
五、v-model与cheekbox结合使用
1、单选框类型
<template>
<div class="hello">
<label for="agree">
<input type="checkbox" id="agree" v-model="isArgee">同意协议
</label>
<h2>选择的是：{{isArgee}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
isArgee: false//默认选择
}
},
}
</script>
2、复选框
<template>
<div class="hello">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>选择的是：{{hobbies}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
hobbies: []//默认选择
}
},
}
</script>
等同于(推荐使用)
<template>
<div class="hello">
<label v-for="item in hobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="myHobbies">{{item}}
</label>
<h2>选择的是：{{myHobbies}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
hobbies: ['篮球', "足球", "乒乓球", "羽毛球"],
myHobbies: []
}
},
}
</script>
六、v-model与select结合使用
1、选一个
<template>
<div class="hello">
<select name="xxx" id="" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="橘子">橘子</option>
<option value="西瓜">西瓜</option>
<option value="葡萄">葡萄</option>
<option value="桃子">桃子</option>
</select>
<h2>选择的是：{{fruit}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
fruit: '橘子'//默认选择
}
},
}
</script>
七、v-model修饰符
1、lazy修饰符:
默认情况下, v-model默认是在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生
改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新: .
<template>
<div class="hello">
<input type="text" value="message" v-model.lazy="message">
<h2>输入的内容是：{{message}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
message: "你好啊"
}
},
}
</script>
2、number修饰符:
默认情况下,在输入框中无论我们输入的是字母还是数字,都会被
当做字符串类型进行处理。
但是如果我们希望处理的是数字类型,那么最好直接将内容当做数
字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型:
<template>
<div class="hello">
<input type="number" value="age" v-model.number="age">
<h2>您的年龄是：{{age}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
age: 10
}
},
}
</script>
3、trim修饰符:
如果输入的内容首尾有很多空格,通常我们希望将其去除
trim修饰符可以过滤内容左右两边的空格
注意：在使用trim的时候 我们的浏览器在显示的时候会主动把浏览器空格去掉 所以在页面上你是看不出来的 需要打印真实数据才能看出来
<template>
<div class="hello">
<input type="text" value="name" v-model.trim="name">
<h2>您的名字是：{{name}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
name: '张山'
}
},
}
</script>
网友评论