欧美国产小视频,一本大道久久a久久综合,日产国产欧美视频一区精品

首頁 > 數碼 > 內容頁

環球看熱訊：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 class="dpfjnjf" 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 class="lj7pt5j" 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??表達式的初始值未能匹配任何選項，??