vue中表单输入绑定v-model
基本使用
<input v-model="message" />
v-model的原理
v-model
原理,本质是两个操作:
- v-bind绑定一个value属性
- v-on给当前元素添加一个input事件
示例
<script>
export default {
data () {
return {
msg:'你开心就好'
}
},
methods: {
changeValue(e){
this.msg = e.target.value
}
},
computed: {
},
watch:{
}
}
</script>
<template>
<div>
<!--
v-model基本使用
-->
<p>msg信息展示: {{ msg }}</p>
<p>
<input type="text" v-model="msg">
</p>
<!--
v-model原理,本质是两个操作:
1. v-bind绑定一个value属性
2. v-on给当前元素添加一个input事件
-->
<p>
<input type="text" :value="msg" @input="changeValue">
</p>
</div>
</template>
<style>
</style>
v-model表单控件的基本使用
文本框input的绑定
<input type="text" v-model="msg">
复选框checkbox
复选框为单个勾选框
,v-model
绑定的是一个布尔值,
data () {
return {
checked:"", // 给一个初始值
},
<!-- 复选框为单个勾选框, v-model绑定的是一个布尔值,
勾选了就是true, 没有勾选就是false
-->
<h1>{{ checked }}</h1>
<input type="checkbox" v-model="checked">
复选框为多个勾选框
,v-model
绑定的是一个数组
data () {
return {
fruits:['西瓜'], //可以默认选中西瓜,也可以不用默认
},
<!-- 复选框为多个勾选框, v-model绑定的是一个数组,勾选某一个之后,
就会把对应的input的value值添加到fruits数组中
-->
<h2>喜欢的水果: {{ fruits }}</h2>
<input type="checkbox" v-model="fruits" value="苹果">苹果
<input type="checkbox" v-model="fruits" value="香蕉">香蕉
<input type="checkbox" v-model="fruits" value="荔枝">荔枝
<input type="checkbox" v-model="fruits" value="西瓜">西瓜
单选框radio
data () {
return {
sex:'男'// 初始化默认性别男
},
<!-- 单选框 -->
<h2>性别--{{ sex }}</h2>
<input type="radio" v-model="sex" value="男">男
<input type="radio" v-model="sex" value="女">女
选项框select
选项框--单选
data () {
return {
hobby:[]
},
<!-- 选项框--单选 -->
<h2>城市: {{ city }}</h2>
<select v-model="city">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
</select>
选项框--多选
, select 加上 multiple 属性就是多选了,多选时, 只要按住Ctrl + 鼠标点击对应选项
data () {
return {
hobby:[]
},
<h2>爱好: {{ hobby }}</h2>
<select v-model="hobby" multiple>
<option value="抽烟">抽烟</option>
<option value="喝酒">喝酒</option>
<option value="打牌">打牌</option>
</select>
完整示例
<script>
export default {
data () {
return {
msg:'你开心就好',
checked:"", // 给一个初始值
fruits:['西瓜'], //可以默认选中西瓜,也可以不用默认
sex:'男',// 初始化默认性别男
city:'深圳',//初始化给一个默认值, 也可以不给, 设置为空字符串
hobby:[]
}
},
methods: {
changeValue(e){
this.msg = e.target.value
}
},
computed: {
},
watch:{
}
}
</script>
<template>
<div>
<!--
v-model基本使用
-->
<!-- 复选框 -->
<!-- 复选框为单个勾选框, v-model绑定的是一个布尔值,勾选了就是true, 没有勾选就是false -->
<h1>{{ checked }}</h1>
<input type="checkbox" v-model="checked">
<!-- 复选框为多个勾选框, v-model绑定的是一个数组,勾选某一个之后,
就会把对应的input的value值添加到fruits数组中
-->
<h2>喜欢的水果: {{ fruits }}</h2>
<input type="checkbox" v-model="fruits" value="苹果">苹果
<input type="checkbox" v-model="fruits" value="香蕉">香蕉
<input type="checkbox" v-model="fruits" value="荔枝">荔枝
<input type="checkbox" v-model="fruits" value="西瓜">西瓜
<!-- 单选框 -->
<h2>性别--{{ sex }}</h2>
<input type="radio" v-model="sex" value="男">男
<input type="radio" v-model="sex" value="女">女
<!-- 选项框 -->
<!-- 选项框--单选 -->
<h2>城市: {{ city }}</h2>
<select v-model="city">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
</select>
<!-- 选项框--多选
select 加上 multiple 属性就是多选了
多选时, 只要按住Ctrl + 鼠标点击对应选项
-->
<h2>爱好: {{ hobby }}</h2>
<select v-model="hobby" multiple>
<option value="抽烟">抽烟</option>
<option value="喝酒">喝酒</option>
<option value="打牌">打牌</option>
</select>
</div>
</template>
<style>
</style>
v-model修饰符的使用
v-model
有3个修饰符
.lazy 懒加载
懒加载,只有表单元素失去焦点,才会进行双向数据绑定
.number 将输入框的内容自动转化为数字类型
如果表单中输入的内容是以数字开头,则截取数字部分;如果开头就不是数字,那么失效
.trim 去掉首尾空白
完整示例
<script>
export default {
data () {
return {
msg:'199291',
count:10,
}
},
methods: {
downMsg()
{
console.log(this.msg)
}
},
computed: {
},
watch:{
}
}
</script>
<template>
<div>
<!--
v-model基本使用
-->
<!-- 修饰符的使用 -->
<!--
.lazy 在默认情况下, v-model 在每次 input 事件触发后,
都将输入框的值与数据进行同步; 我们可以添加 .lazy 修饰符,
从而转化在 change事件之后进行同步
-->
<h1>{{ msg }}</h1>
<!-- .lazy 当输入框失去焦点, 再去同步输入框中的数据 -->
<input type="text" v-model.lazy="msg">
<!-- .number 将输入框的内容自动转化为数字类型 -->
<h2>输入的值: {{ count }}</h2>
<h2>值得类型: {{ typeof(count) }}</h2>
<input type="text" v-model.number="count" >
<!-- .trim 自动过滤用户输入的首位空白字符串 -->
<h2>msg----{{ msg }}</h2>
<input type="text" v-model.trim="msg" @keydown="downMsg">
</div>
</template>
<style>
</style>