vue.js指令v-model使用方法
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定,本文就表單處理時運(yùn)用v-model指令實現(xiàn)雙向綁定做一個介紹:
v-model這個指令只能用在<input>, <select>,<textarea>這些表單元素上,所謂雙向綁定,指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內(nèi)容保持一致,兩者無論誰被改變,另一方也會相應(yīng)的更新為相同的數(shù)據(jù)。這是通過設(shè)置屬性訪問器實現(xiàn)的。例如:
var data = { name: "erik", getName: function() { return this.name; }, setName: function(name) { this.name = name; } };
上面的代碼中我們通過getName()和setName()方法作為訪問器,我們可以進(jìn)一步嚴(yán)格限制(如借助Object.defineProperty方法)不直接訪問name這個屬性,所有對data.name的讀寫都必須通過data.getName()和data.setName()方法。此時我們改寫訪問器方法,添加對屬性值改變得到監(jiān)控,便可以實現(xiàn)數(shù)據(jù)的雙向綁定。
那么在表單處理中我們具體如何使用v-model呢,先看看官方文檔給出的例子:
<form id="demo"> <!-- text --> <p> <input type="text" v-model="msg"> {{msg}} </p> <!-- checkbox --> <p> <input type="checkbox" v-model="checked"> {{checked ? "yes" : "no"}} </p> <!-- radio buttons --> <p> <input type="radio" name="picked" value="one" v-model="picked"> <input type="radio" name="picked" value="two" v-model="picked"> {{picked}} </p> <!-- select --> <p> <select v-model="selected"> <option>one</option> <option>two</option> </select> {{selected}} </p> <!-- multiple select --> <p> <select v-model="multiSelect" multiple> <option>one</option> <option>two</option> <option>three</option> </select> {{multiSelect}} </p> <p><pre>data: {{$data | json 2}}</pre></p> </form>
對應(yīng)的js:
new Vue({ el: '#demo', data: { msg : 'hi!', checked : true, picked : 'one', selected : 'two', multiSelect: ['one', 'three'] } })
效果如下:
小伙伴們可以嘗試一下寫出這個頁面,在瀏覽器中當(dāng)你調(diào)整上面表單元素的選中值時,你會發(fā)現(xiàn)下面打印的vue實例內(nèi)容也會隨之改變,而如果你在代碼中改變vue實例data內(nèi)容時渲染出來的表單選中值也會隨之改變。
另外,v-model這個指令還有幾個可選的參數(shù):lazy,number,options,debounce
1.使用lazy參數(shù)是將雙向數(shù)據(jù)同步的時間節(jié)點(diǎn)從input觸發(fā)改為了change觸發(fā),調(diào)用方式如下:
<!-- synced after "change" instead of "input" --> <input v-model="msg" lazy>
2.使用number參數(shù)是通知v-model綁定的dom元素把用戶輸入值默認(rèn)當(dāng)成數(shù)字來處理,調(diào)用如下:
<input v-model="age" number>
3.使用options參數(shù)是用于渲染一個select項的列表,調(diào)用方式如下:
<select v-model="selected" options="myOptions"></select>
其中options的參數(shù)名指向一個數(shù)組,該數(shù)組可以包括字符串或?qū)ο?,對象可以是{text:'', value:''}的形式,指定了<option>的value屬性與text內(nèi)容,例如:
[ { text: 'A', value: 'a' }, { text: 'B', value: 'b' } ]
將渲染出:
<select> <option value="a">A</option> <option value="b">B</option> </select>
如果對象是{ label:'', options:[...] }的形式,則可以渲染出多個option組<optgroup>,如下例:
[ { label: 'A', options: ['a', 'b']}, { label: 'B', options: ['c', 'd']} ]
將渲染出:
<select> <optgroup label="A"> <option value="a">a</option> <option value="b">b</option> </optgroup> <optgroup label="B"> <option value="c">c</option> <option value="d">d</option> </optgroup> </select>
4.使用debounce參數(shù)是指定一個延遲時間,延遲從按鍵觸發(fā)到數(shù)據(jù)更新同步之間的時間,當(dāng)我們的更新操作比較耗時時這個屬性十分有用,例如搜索引擎在我們鍵入字符時發(fā)送ajax請求完成自動補(bǔ)全提示,調(diào)用如下:
<input v-model="msg" debounce="500">
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法
這篇文章主要給大家介紹了關(guān)于Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項目中遇到的一個問題,這里給大家總結(jié)下解決辦法,需要的朋友可以參考下2023-08-08vue.js自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了vue.js自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01一文詳解Vue的響應(yīng)式原則與雙向數(shù)據(jù)綁定
使用 Vue.js 久了,還是不明白響應(yīng)式原理和雙向數(shù)據(jù)綁定的區(qū)別?今天,我們就一起來學(xué)習(xí)一下,將解釋它們的區(qū)別,快跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)
本文通過實例代碼給大家介紹了Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-08-08vue quill editor 使用富文本添加上傳音頻功能
vue-quill-editor 是vue項目中常用的富文本插件,其功能能滿足大部分的項目需求。這篇文章主要介紹了vue-quill-editor 富文本添加上傳音頻功能,需要的朋友可以參考下2020-01-01