基础用法
可以使用v-model指令在表单,及元素上创建双向数据绑定,他会根据控制类型自动选取正确的方法来更新元素,v-model负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注:v-model会忽略所有表单元素的value,checked,selected特性的初始值,而总是将vue实例的数据作为数据来源,你应该通过js在组件的data选项中声明初始值。
对于需要使用输入法的语言(如中文,日文),你会发现v-model不会在输入法组合文字过程中得到更新,如果你想处理这个过程,请使用input事件。
代码如下:
<template>
<div>
<!-- 通过v-model绑定一个变量在input上,当input中的值发生改变时,span中的值也会发生变量-->
<input type="text" v-model="mes">
<span>Input输入的内容是:{{mes}}</span>
</div>
</template>
<script>
export default {
data() {
return {
mes: ""
};
}
};
</script>
单个复选框
单个复选框,绑定到布尔值:
代码如下:
<template>
<div>
<!-- 新建一个复选框,使用v-model进行绑定 -->
<input type="checkbox" v-model="checked">
<!-- 当复选框变化时,label中的数据也会跟着变化 -->
<label>{{checked}}</label>
</div>
</template>
<script>
export default {
data() {
return {
checked: false //默认为不选中
};
}
};
</script>
多个复选框checkbox
如果是多个复选框,可以绑定到同一个数组中:
<template>
<div class="main">
<ul>
<li>
<label>lisa</label>
<!-- 如果当前input被选中时,它是true,它的值value是“lisa”,此时会把它的值value添加到checkedNames中 -->
<input type="checkbox" value="lisa" v-model="checkedNames">
</li>
<li>
<label>jack</label>
<input type="checkbox" value="jack" v-model="checkedNames">
</li>
<li>
<label>coco</label>
<input type="checkbox" value="coco" v-model="checkedNames">
</li>
<li>
<label>ann</label>
<input type="checkbox" value="ann" v-model="checkedNames">
</li>
<li>
<label>lucy</label>
<input type="checkbox" value="lucy" v-model="checkedNames">
</li>
</ul>
<p>选择的是:{{checkedNames}}</p>
</div>
</template>
<script>
export default {
data() {
return {
checkedNames: []
};
}
};
</script>
单选按钮:
<template>
<div class="main">
<ul>
<li>
<label>One</label>
<input type="radio" id="one" value="One" v-model="picked">
</li>
<li>
<label>Two</label>
<input type="radio" id="two" value="Two" v-model="picked">
</li>
<li>
<label>Three</label>
<input type="radio" id="three" value="Three" v-model="picked">
</li>
</ul>
<p>选择的是:{{picked}}</p>
</div>
</template>
<script>
export default {
data() {
return {
picked: ""
};
}
};
</script>
下拉菜单选择框
<template>
<div class="main">
<!-- 为下拉菜单设置v-model,选择某一项的时候,就把某一项的值传给selected -->
<select v-model="selected">
<!-- disable用来禁用某一个option -->
<option disabled value>--请选择--</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<p>选择的是:{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: ""
};
}
};
</script>
如果v-model表达式的初始值未能匹配任何选项,元素将被渲染为“未选中”状态,在IOS中,这会使用户无法选中第一个选项,因为这样的情况下,IOS不会触发change事件,因为更推荐像上面这样提供一个值为空的禁用选项。
多选下拉菜单
下拉菜单多选,多选时,绑定到一个数组:
代码如下:
<template>
<div class="main">
<select v-model="selected" multiple style="width:150px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>选择的是:{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: []
};
}
};
</script>
使用v-for渲染动态选项
代码如下:
<template>
<div class="main">
<select v-model="selected">
<option v-for="(item,index) in items" :key="index" :value="item.title">{{item.text}}</option>
</select>
<p>当前选择:{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: "A", //默认选择第一个value值
//items是一个数组,数组中是3个对象
items: [
{ text: "apple", title: "A" },
{ text: "pear", title: "B" },
{ text: "orange", title: "C" }
]
};
}
};
</script>
值绑定
对于单选按钮,复选框及选择框的选项,v-model绑定的值通常是静态字符串(对于复选框也可以是布尔值)
代码如下:
<template>
<div class="main">
<!-- 当选中单选按钮后,picked的值为a -->
<input type="radio" v-model="picked" value="a">
<p>选择值是{{picked}}</p>
<!-- 当选择复选框后,toggle的值为true或false -->
<input type="checkbox" v-model="toggle">
<p>选择值是:{{toggle}}</p>
<!-- 当选择下拉菜单后,selected的值为option的value的值 -->
<select v-model="selected">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<p>选择值是:{{selected}}</p>
</div>
</template>
<script>
export default {
data() {
return {
picked: "",
toggle: "",
selected: ""
};
}
};
</script>
但是有时我们可能想把值绑定到vue实例的一个动态属性上,这时可以用v-bind实现,并且这个属性的值可以不是字符串。
例如:复选框
<template>
<div class="main">
<input type="checkbox" v-model="sel" true-value="选中" false-value="未选中">
<p>选择值是:{{sel}}</p>
</div>
</template>
<script>
export default {
data() {
return {
sel: "未选中"
};
}
};
</script>
当复选框选中时,会把true-value的值传给v-model,当未被选中时,会把false-value的值传给v-model
注:这里的true-value和false-value特性并不会影响输入控件的value特性,因为浏览器在提交表单时并不会包含未被选中的复选框,如果要确保表单中这两个值中的一个能够被提交,比如(yes,no),请换用单选按钮
例如:单选按钮
代码如下:
<template>
<div class="main">
<input type="radio" v-model="pick" v-bind:value="aa">
<p>选择值是:{{pick}}</p>
</div>
</template>
<script>
export default {
data() {
return {
pick: "",
aa: "选中了"
};
}
};
</script>
当选中了单选按钮后,v-model的pick值会获取当前按钮的value的值。
例如:选择框的选项
<template>
<div class="main">
<select v-model="sel">
<option disabled value>--请选择--</option>
<option v-bind:value="{number:123}">123</option>
</select>
<p>选择值是:{{sel.number}}</p>
</div>
</template>
<script>
export default {
data() {
return {
sel: ""
};
}
};
</script>
修饰符
.lazy
在默认情况下,v-model在每次input事件触发后输入框的值与数据进行同步(除了上述输入法组合文字时)。你可以添加lazy修饰符,从而转变为使用change事件进行同步:
代码如下:
<template>
<div class="main">
<input v-model.lazy="msg">
<p>选择值是:{{msg}}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: ""
};
}
};
</script>
注释:v-model默认是同步数据,使用.lazy会转变为在change事件中同步,也就是说加上.lazy后,只有当失去焦点或者按下回车键时才更新。
.number
.number修饰符可以将输入的值转化为Number类型,否则虽然你输入的是数字,但它的类型其实是String,在数字输入框中比较有用。
<template>
<div class="main">
<input v-model.number="n" type="number">
<p>我的数据类型是:{{typeof(n)}}</p>
</div>
</template>
<script>
export default {
data() {
return {
n: ""
};
}
};
</script>
.trim
.trim修饰符会自动过滤掉输入的首尾空格
<template>
<div class="main">
<input type="text" v-model.trim="val">
<p>val的长度是:{{val.length}}</p>
</div>
</template>
<script>
export default {
data() {
return {
val: ""
};
}
};
</script>