Vue 数组的操作（变异方法）（排序，颠倒，添加，删除）
用户投稿 学习笔记 20阅读
<!DOCTYPE html><html lang="zh-CN"><head> <title>vue_one</title> <script src="js/vue_2.5.16.js"></script></head><body> <div id="app"> <h3>数组操作（变异方法）</h3> <button v-on:click="num_list.sort(compare_desc)">倒叙排序 sort()</button> <button v-on:click="num_list.sort(compare_asc)">正序排序 sort()</button> <button v-on:click="num_list.reverse()">数组颠倒 reverse()</button> <button v-on:click="num_list.pop()">末尾删除 array.pop()</button> <button v-on:click="num_list.shift()">首位删除 array.shift()</button> <button v-on:click="num_list.unshift(-99)">首位增加 array.unshift()</button> <button v-on:click="num_list.push(100)">末尾增加 array.unshift()</button> <button v-on:click="num_list.splice(1,1,2)">替换splice(1,1,2)</button> <button v-on:click="num_list.splice(1,1)">删除splice(1,1)</button> <button v-on:click="num_list.splice(1,0,21)">增加splice(1,0,21)</button> <ul> <li v-for="num, num_index in num_list">num : {{num}}<button v-on:click="num_list.splice(num_index, 1)">删除</button></li> </ul> <h3> </div></body><script> new Vue({ el: "#app", data: { num_list: [1,3,4,5,7,10,6,2] }, methods:{ compare_desc: function(x, y) { if (x < y){ return -1 }else if (x>y){ return 1 }else{ return 0 } }, compare_asc: function(x, y) { if (x > y){ return -1 }else if (x<y){ return 1 }else{ return 0 } } } })</script></html>
PS
sort() 方法在排序数字时会把 10排在2之前，所以写了两个方法进行修正。splice() 很有用，定位删除、增加、替换用他很有用。标签：