Vue學習筆記之函數、高階函數、v-model的應用

一、哪些函數是響應式的:

1.push 在後面追加數據

5.sort() 排序

6.reverse() 順序翻轉 abcd ----> dcba

紅框中的方式修改數組中的數據時,界面沒有響應式的效果

 

二、高階函數:對數組的操作

1、filter函數,返回布爾值

返回值是true,則返回當前的值;如果返回值是false,則不返回當前值。循環判斷數據裏面的數據,直到完成;

2、map函數,對數組裏面的值進行處理後,返回相應的值。循環判斷數據裏面的數據,直到完成。

3、reduce函數,可以理解爲“合計”的一個動作

高階函數的聯合使用:

更簡潔的寫法:

實例:

 

三、v-model的用法:

1、data裏面的message字段綁定到input的控件中,改變控件或者改變data裏面message的值,都會相應變化,雙向綁定。

修改message值:

修改控件值:

原理:

v-model與單項控件的使用:

PS:input裏面的name屬性,是在做表單的時候,相同名字的,則只能選擇一個;但有v-model後,可以將name的屬性去掉,效果也一樣。

v-model跟單、多選框的使用:單選框對應布爾值,多選框對應數組

其中:label的作用是點擊“同意協議”的文字也可以進行選擇

v-model與select的應用:

單選:注意v-model的位置

多選:返回值是數組,同時需增加multiple的屬性,界面上按shift、Ctrl鍵進行多選

值綁定:界面數據從後臺獲取,再將相關數據渲染到界面上,不再是界面上直接寫死選項

注意循環時id要進行動態綁定v-bind!

 

v-model的修飾符

lazy:當回車或數據在失去焦點是纔會更新內容;

number:可以讓在輸入框中輸入的內容自動轉換成數字類型;

trim:可以過濾字符串中首尾兩邊的空格。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章