about API This thing , Each front-end framework is different , And they are always updated , Don't forget it , So this blog records it Vue Commonly used in business API( It's a little more complicated API, Simple strategy )
Vue Array operations in
* loop <ul> // FAQ: key The value is generally not taken index( Array subscript value ) Take the unique id value
//( If a page has multiple arrays ,index There will be multiple ,key The value loses its uniqueness ) <li v-for="(item, index) in list" :key=
"item.id">{{item.name}}</li> <ul>
* Changing array values list:['a','b','c']; // This is data Array in list[0] = 'aa'; //
Such modification is invalid ,UI The interface does not re render This should be noted // The right posture By calling $set(array, index, value) // Chuanshen :1.
Array to operate on 2. Subscript value 3. Modified value this.$set(this.list, 0, 'aa'); // or Vue.$set(this.list,
0, 'aa');
* Object array element swap position ( Applicable to business , List swapping and moving up and down ) list:[ { id:1, name: ' Xiao Ming ', }, { id:2, name:
' Xiaohong ', }, { id:3, name: ' Little green ', }, ] // Move up and down function changeSort(type, index){ let
tempArray; // Move up if(type == 'up'){ // Make a temporary array to receive it tempArray = this.list[index-1];
// exchange this.$set(this.list, index-1,this.list[index]); this.$set(this.list, index
, tempArray); }else{ tempArray = this.list[index + 1]; this.$set(this.list,
index+ 1,this.list[index]); this.$set(this.list, index, tempArray); } } //
Random switching is the same , pass index That's it // ... The code is abbreviated
* Delete array elements this.$delete(this.list, index); // index Subscript value
Vue Object operations in
obj: { name: ' Zhu Xiaoming ', age: 18, class: ' Class 2, grade 3 ' }
* modify this.$set(this.obj, 'name', ' Son of a bitch '); // obj In name from “ Zhu Xiaoming ” It became “ Son of a bitch ”
* delete this.$delete(this.obj, "age"); // obj In age No way
Vue In $nextTick
It's too long , Write a separate article next time , Put a link ( Go to a mutton hot pot first , take leave !)
This blog will be updated from time to time , record Vue A variety of commonly used API And easy to step on , Students in need can collect a wave , If it helps you , You can deduct one in the comments section “ Useful ”, And then like it , Thank you ~
Technology