Vue 数组的操作（变异方法）（排序，颠倒，添加，删除）

最新推荐文章于 2024-03-29 14:19:17 发布

老毒毒毒毒

最新推荐文章于 2024-03-29 14:19:17 发布

阅读量1.1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_38564268/article/details/103917396

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

sort() 方法在排序数字时会把 10排在2之前，所以写了两个方法进行修正。
splice() 很有用，定位删除、增加、替换用他很有用。

老毒毒毒毒

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue 数组的操作（变异方法）（排序，颠倒，添加，删除）

<!DOCTYPE html><html lang="zh-CN"><head> <title>vue_one</title> <script src="js/vue_2.5.16.js"></script></head><body> <div i...
复制链接

扫一扫