您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Vue模板語(yǔ)法中如何實(shí)現(xiàn)數(shù)據(jù)綁定”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue模板語(yǔ)法中如何實(shí)現(xiàn)數(shù)據(jù)綁定”這篇文章吧。
1.單項(xiàng)數(shù)據(jù)綁定
<div id="di"> <input type="text" :value="input_val"> </div> <script> var app = new Vue({ el: '#di', data: { input_val: 'hello world ' } }) </script>
通過(guò)瀏覽器 REPL 環(huán)境可以進(jìn)行修改 app.input_val = 'Vue'
我們通過(guò) vue 對(duì)象修改數(shù)據(jù)可以直接影響到 DOM 元素,但是,如果直接修改 DOM 元素,卻不會(huì)影響到 vue 對(duì)象的數(shù)據(jù);我們把這種現(xiàn)象稱(chēng)為 單向數(shù)據(jù)綁定 ;
2.雙向數(shù)據(jù)綁定v-model:
<div id="di"> <input type="text" v-model="input_val" > </div> <script> var app = new Vue({ el: '#di', data: { input_val: 'hello world ' } }) </script>
通過(guò) v-model 指令展示表單數(shù)據(jù),此時(shí)就完成了 雙向數(shù)據(jù)綁定 ;
不管 DOM 元素還是 vue 對(duì)象,數(shù)據(jù)的改變都會(huì)影響到另一個(gè);
2.1雙向數(shù)據(jù)綁定的應(yīng)用范圍:
文本框 & 文本域
<div id="di"> <textarea v-model="inp_val"></textarea> <div>{{ inp_val }}</div> </div> <script> var app = new Vue({ el: '#di', data: { inp_val: '' } }) </script>
綁定復(fù)選框
<div id="di"> 吃飯:<input type="checkbox" value="eat" v-model="checklist"><br> 睡覺(jué):<input type="checkbox" value="sleep" v-model="checklist"><br> {{ checklist }} </div> <script> var vm = new Vue({ el: '#di', data: { checklist: [] } }); </script>
綁定單選框
<div id="ap"> 男<input type="radio" name="sex" value="男" v-model="sex"> 女<input type="radio" name="sex" value="女" v-model="sex"> <br> {{sex}} </div> <script> var vm = new Vue({ el: '#ap', data: { sex: '' } }); </script>
以上是“Vue模板語(yǔ)法中如何實(shí)現(xiàn)數(shù)據(jù)綁定”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。