雙向繫結(v-model和屬性的雙綁)
一、可以使用v-model的標籤
你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇,但v-model 本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料,並對一些極端場景進行一些特殊處理。
v-model 會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 data 選項中宣告初始值。
二、雙向繫結
雙向繫結:資料改變時會自動更新檢視,檢視發生變化時會更新資料。
<div id="app"> <input v-model="name" type="text"> {{name}} </div> <script> const vm = new vue({ el: "#app", data: { name: "麼麼噠" } }); </script>
1.v-model在input的下拉框、單選按鈕、複選框中的應用
如下面程式碼,分別是v-model在input不同的元件中的應用,但是大體用法相同。注意:像下面程式碼中複選框這樣需要接收多條資料的情況下,在data裡面應該由陣列與其對應二不是字串。
這裡有一個值繫結的問題,不管是下拉框或者單選按鈕還是複選框,我們都可以在對應的標籤內設定value。以下拉框為例,我們在<option>中添加了vulue=“A被選”,當我們選擇第一個下拉框A的時候,在selected中的字串為‘A被選',如果我們不在<option>中設定value值的話那麼selected中的字串將是<option>中的值‘A'。
這裡還有一個和vue無關的問題,比較簡單,但是由於平時主要做後臺java開發沒太注意這個前端問題。以下面的單選按鈕程式碼為例,<label>標籤內有一個for元素與input中的id值對應(兩個值相同),剛開始不太理解為什麼這麼寫,這個對前端人員來說應該是一個很簡單的問題。這樣寫的目的沒有其它任何作用,只是label元素為滑鼠改進了可用性,在點選label的時候也相當於點選了對應的input控制元件,點選label標籤也可以觸發input標籤控制元件。例如單選按鈕在加了for之後點選small也可以選擇對應按鈕,但是如果不加for是沒有任何反應的。
<!--下拉框--> <div id="app"> <select v-model="selected"> <option value="A被選">A</option> <option value="B被選">B</option> <option value="C被選">C</option> </select> <span>Selected: {{ selected }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { selected: '' } }); </script> <!--單選按鈕--> <div id="app"> <input type="radio" id="small" value="small_value" v-model="picked"> <label for="small">small</label> <br> <input type="radio" id="big" value="big_value" v-model="picked"> <label for="big">big</label> <br> <span>Picked: {{ picked }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { picked: '' } }) </script> <!--複選框--> <div id="app"> <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames"> <label for="one">選項一</label> <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames"> <label for="two">選項二</label> <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames"> <label for="three">選項三</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { checkedNames: [] } }) </script>
2.v-model修飾符
v-model也可以和.lazy、.trim和.number這些修飾符一起使用。
<!-- 在每次 input 事件觸發後將輸入框的值與資料進行同步,新增 lazy 修飾符,從而轉變為使用 change 事件進行同步 --> <input v-model.lazy="msg" > <!--去除字串首尾的空格--> <input v-model.trim="msg"> <!--將資料轉化為值型別--> <input v-model.number="age" type="number">
下面在單獨給大家介紹下vue中v-model使用
v-model用於表單資料的雙向繫結,其實它就是一個語法糖,這個背後就做了兩個操作:
1. v-bind繫結一個value屬性
2. v-on指令給當前元素繫結input事件
自定義元件使用v-model,應該有以下操作:
1. 接收一個value prop
2. 觸發input事件,並傳入新值
在原生表單元素中:
<input v-model="inputValue">
相當於
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
在自定義元件中
<my-component v-model="inputValue"></my-component>
相當於
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>
這個時候,inputValue接受的值就是input事件的回撥函式的第一個引數,所以在自定義元件中,要實現資料繫結,還需要$emit去觸發input的事件。
this.$emit('input', value)
我是小白,期待和優秀的你一起同行!