环球看热讯：Day19_07_Vue教程之Vue表单输入

首页 > 数码 > 内容页

环球看热讯：Day19_07_Vue教程之Vue表单输入

2022-12-23 14:25:53 来源：51CTO博客

(相关资料图)

Vue教程之Vue表单输入

一.什么是双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

二.为什么要实现数据的双向绑定

在 Vue.js 中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的 UI 控件来说，对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

三.在表单中使用双向数据绑定

你可以用v-model指令在表单、</code>及<code><select></code>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但<code>v-model</code>本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p><p><strong>注意：</strong><code><strong>v-model</strong></code><strong>会忽略所有表单元素的</strong><strong><code>value</code></strong><strong>、</strong><strong><code>checked</code></strong><strong>、</strong><strong><code>selected</code></strong><strong>特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的</strong><strong><code>data</code></strong><strong>选项中声明初始值。</strong></p><h3 id="h4">1. 单行文本</h3><pre><div id="vue"> 单行文本：<input type="text" v-model="message" />单行文本是：{{message}}</div></pre><pre><script type="text/javascript"> var vm = new Vue({ el: "#vue", data: { message: "Hello Vue" } });</script></pre><h3 id="h5">2. 多行文本</h3><pre><div id="vue"> 多行文本：<textarea v-model="message">多行文本是：{{message}}

<script type="text/javascript">    var vm = new Vue({        el: "#vue",        data: {            message: "Hello Textarea"        }    });</script>

`3. 单复选框`

    单复选框：{{ checked }}

<script type="text/javascript">    var vm = new Vue({        el: "#vue",        data: {            checked: false        }    });</script>

`4. 多复选框`

    多复选框：        Jack        John        Mike    选中的值: {{ checkedNames }}

<script type="text/javascript">    var vm = new Vue({        el: "#vue",        data: {            checkedNames: []        }    });</script>

`5. 单选按钮`

    单选按钮：        One        Two    选中的值: {{ picked }}

<script type="text/javascript">    var vm = new Vue({        el: "#vue",        data: {            picked: ""        }    });</script>

`6. 下拉框`

    下拉框：        选中的值: {{ selected }}

<script type="text/javascript">    var vm = new Vue({        el: "#vue",        data: {            selected: ""        }    });</script>

注意：如果v-model表达式的初始值未能匹配任何选项，