风云阁资源网

Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
网络编程 2024/11/15 佚名
3 1

表单类控件承载了一个网页数据的录入与交互，本章将介绍如何使用指令v-model完成表单的数据双向绑定。

6.1 基本用法

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。
Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。

 例如下面的例子：

<div id="app">
 <input type="text" v-model="message" placeholder="请输入...">
 <p>输入的内容是：{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

在输入框输入的同时，{{message}}也会实时将内容渲染在视图中。

 如图6-1所示：

Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

对于文本域<textarea>也是同样的用法：

<div id="app">
 <textarea v-model="text" placeholder="请输入..."></textarea>
 <p>输入的内容是：</p>
 <p style="white-space: pre;">{{text}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 text: ""
 }
 });
</script>

提示：

  •  提示v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在<textarea></textarea>之间插入的值，也不会生效。
  •  使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发鞥新。
  •  如果希望总是实时更新，可以用@input来替代v-model。
  •  事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。
  •  例如下面的示例：
<div id="app">
 <input type="text" @input="handleInput" placeholder="请输入...">
 <p>输入的内容是：{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 },
 methods: {
 handleInput: function(event) {
 this.message = event.target.value;
 }
 }
 });
</script>

来看看更多的表单控件。

单选按钮：

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为true时选中，为false时不选。
 例如：

<div id="app">
 <input type="radio" :checked="picked">
 <label>单选按钮</label>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: true
 }
 });
</script>

如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用：

<div id="app">
 <input type="radio" v-model="picked" value="html" id="html">
 <label for="html">HTML</label>
 
 <input type="radio" v-model="picked" value="js" id="js">
 <label for="js">JavaScript</label>
 
 <input type="radio" v-model="picked" value="css" id="css">
 <label for="css">CSS</label>
 
 <p>您选择的是：{{picked}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: "js"
 }
 });
</script>

数据picked的值与表单按钮的value值一致时，就会选中该项，所以当前状态下选中的是第二项。
 如图6-2所示：

Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

复选框：

复选框也分单独使用和组合使用，不过用法稍与单选不同。

 复选框单独使用时，也是用v-model来绑定一个布尔值。

 例如：

<div id="app">
 <input type="checkbox" v-model="checked" id="checked">
 <label for="checked">选择状态：{{checked}}</label>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 checked: false
 }
 });
</script>

在勾选时，数据checked的值改为了true，<label>中渲染的内容也会更新。

组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数据当中，就会选中这一项。

 这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中。

 实例代码如下：

<div id="app">
 <input type="checkbox" v-model="checked" value="html" id="html">
 <label for="html">HTML</label>
 <br>
 <input type="checkbox" v-model="checked" value="js" id="js">
 <label for="js">JavaScript</label>
 <br>
 <input type="checkbox" v-model="checked" value="css" id="css">
 <label for="css">CSS</label>
 <br>
 <p>你选择的是：{{checked}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 checked: ["html", "css"]
 }
 });
</script>

当前状态下的结果如图6-3所示：

Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

选择列表：

选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。
 先看一下单选的示例代码：

<div id="app">
 <select v-model="selected">
 <option>html</option>
 <option value="js">JavaScript</option>
 <option>css</option>
 </select>
 <p>你选择的是：{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: "html"
 }
 });
</script>

<option>是备选项，如果含有value属性，v-model就会优先匹配value的值； 

如果没有，就会直接匹配<option>的text。

 比如选中第二项时，selected的值为js，而不是JavaScript。

给<select>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似。
 实例代码如下：

<div id="app">
 <select v-model="selected" multiple>
 <option>html</option>
 <option value="js">JavaScript</option>
 <option>css</option>
 </select>
 <p>你选择的是：{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: ["html", "js"]
 }
 });
</script>

在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的。
 例如：

<div id="app">
 <select v-model="selected">
 <option v-for="item in options" :value="item.value">{{item.text}}</option>
 </select>
 <p>你选择的是：{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 options: [
 {text:"HTML", value:"html"},
 {text:"JavaScript", value:"js"},
 {text:"CSS", value:"css"},
 ],
 selected: "html"
 }
 });
</script>

虽然用选择列表<select>控件可以很简单地完成下拉选择的需求，但是在实际业务中反而不常用，因为它的样式依赖平台和浏览器，无法统一，也不太美观，功能也受限，，比如不支持搜索，所以常见的解决方案是用<div>moi一个类似的控件。

 当阅读完第7章组件的内容后，可以尝试编写一个下拉选择器的通用组件。

6.2 绑定值

上一节介绍的单选按钮、复选框和选择列表在单独使用或单选的模式下，v-model绑定的值是一个静态字符串或布尔值。
 但在业务中，有时需要绑定一个动态的数据，这时可以用v-bind来实现。

单选按钮：

<div id="app">
 <input type="radio" v-model="picked" :value="value">
 <label>单选按钮</label>
 <p>{{picked}}</p>
 <p>{{value}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: false,
 value: 123
 }
 });
</script>

在选中时，app.picked===app.value，值都是123。

复选框：


<div id="app">
 <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
 <label>复选框</label>
 <p>{{toggle}}</p>
 <p>{{value1}}</p>
 <p>{{value2}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 toggle: false,
 value1: "a",
 value2: "b"
 }
 });
</script>

 勾选时，app.toggle===app.value1；

 未勾选时，app.toggle===app.value2。

选择列表：

<div id="app">
 <select v-model="selected">
 <option :value="{number:123}">123</option>
 </select>
 {{selected.number}}
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: ""
 }
 });
</script>

 当选中时，app.selected是一个Object，所以app.selected.number===123。

6.3 修饰符

与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

.lazy：

在输入框中，v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入法情况外)。

 使用修饰符.lazy会转变为在change事件中同步，示例代码如下：

<div id="app">
 <input type="text" v-model.lazy="message">
 <p>{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

 这是，message并不是实时改变的，而是在失焦或按回车时才更新。

.number：

使用修饰符.number可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型其实是String。
 比如在数字输入框时会比较有用，示例代码如下：

<div id="app">
 <input type="number" v-model.number="message">
 <p>{{typeof message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: 123
 }
 });
</script>

 .trim：

修饰符.trim可以自动过滤输入的首尾空格，示例代码如下：


<div id="app">
 <input type="text" v-model.trim="message">
 <p>{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

 从Vue.js 2.x开始，v-model还可以用于自定义组件，满足定制化的需求，在下一节会介绍。

以上所述是小编给大家介绍的Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

风云阁资源网 Design By www.bgabc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
风云阁资源网 Design By www.bgabc.com
www.bgabc.com 风云阁资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
风云阁资源网 Design By www.bgabc.com