vue學習-第三個DEMO(計算屬性和監視) v-model基礎用法
阿新 • • 發佈:2020-05-19
<div id="demo"> 姓:<input type="text" placeholder="First Name" v-model="fristname"><br> 名:<input type="text" placeholder="Last Name" v-model="lastname"><br> 姓名1(單向):{{fulname1}}<br> 姓名2(單向):<input type="text" placeholder="name" v-model="fulname2"><br> 姓名3(雙向):<input type="text" placeholder="name"><br> </div> <script> const vm = new Vue({ el:"#demo", data:{ fristname:"A", lastname:"B", // fullname1:"A B" fulname2:"A B" }, computed:{ //什麼時候執行:初始化的時候,相關的屬性資料發生變化的時候 fulname1(){ //計算屬性中的一個方法,方法的返回值作為屬性值 return this.fristname + ' ' + this.lastname; } }, watch:{ //配置監視 fristname:function (value) { //fristname發生變化 this.fulname2 = value + ' '+ this.lastname //this就是vm物件 } } }) vm.$watch('lastname',function (value) { //更新fulname2 this.fulname2 = this.fristname+ ' '+value }) </script>
v-model基礎用法
(詳見https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95)
你可以用 v-model
指令在表單 <input>
、<textarea>
及 <select>
元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇,但 v-model
本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料,並對一些極端場景進行一些特殊處理。
v-model
會忽略所有表單元素的 value
、checked
、selected
特性的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 data
v-model
在內部為不同的輸入元素使用不同的屬性並丟擲不同的事件:
-
text 和 textarea 元素使用
value
屬性和input
事件; -
checkbox 和 radio 使用
checked
屬性和change
事件; -
select 欄位將
value
作為 prop 並將change
作為事件。
對於需要使用輸入法 (如中文、日文、韓文等) 的語言,你會發現 v-model
不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程,請使用 input
事件。
在文字區域插值 (<textarea>{{text}}</textarea>
v-model
來代替。
&n