Vue练习三十四：04_07_各种数组方法练习

Demo 在线地址：
https://sx00xs.github.io/test/34/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<template>
    <div>
        <div class="div1">{{arr1.toString()}}</div>
        <input type="button" v-model="mes1" @click="handleFirst" />
        <input type="button" v-model="mes2" @click="handleLast"/>
        <div class="div1">{{arr2.toString()}}</div>
        <input type="button" value="复制" @click="handleCopy"/>
        <input type="button" value="还原" @click="handleReset"/>
        <div class="div1">{{arr3.toString()}}</div>
        <input type="button" value="还原" @click="handleReset1"/>
        <input type="button" value="删除前三项" @click="handleRemoveThree"/>
        <input type="button" value="删除第二至三项" @click="handleRemoveTwo"/>
        <input type="button" value="在第二项后插入(orange, purple)" @click="handleInsert"/>
        <input type="button" value="替换第二项和第三项" @click="handleReplace"/>
    </div>
</template>
<script>
export default {
    data(){
        return{
            bS1:true,
            bS2:true,
            mes1:'删除January(1)',
            mes2:'删除December(12)',
            arr1:[
            'January(1)','February(2)','March(3)','April(4)','May(5)','June(6)','July(7)','Aguest(8)','September(9)','October(10)','November(11)','December(12)'
        ],
            arr2:[
            0,1,2,3,4,5,6,7,8,9
        ],
            arr3:[
            'red','green','blue','white','yellow','black','brown'
        ]
        }
    },
    methods:{
        handleFirst(){
            this.bS1 ?
            (this.arr1.shift(), this.mes1=this.mes1.replace('删除','添加'), this.bS1=false) :
            (this.arr1.unshift('January(1)'),this.mes1= this.mes1.replace('添加','删除'),this.bS1=true);
            
        },
        handleLast(){
            this.bS2 ?
            (this.arr1.pop(), this.mes2=this.mes2.replace('删除','添加'),this.bS2=false) :
            (this.arr1.push('December(12)'), this.mes2=this.mes2.replace('添加','删除'), this.bS2=true);
        },
        handleCopy(){
            this.arr2=this.arr2.concat(this.arr2)
        },
        handleReset(){
            this.arr2=this.arr2.slice(0,10)
        },
        handleReset1(){
            this.arr3=['red','green','blue','white','yellow','black','brown']
        },
        handleRemoveThree(){
            this.arr3.splice(0,3)
        },
        handleRemoveTwo(){
            this.arr3.splice(1,2)
        },
        handleInsert(){
            this.arr3.splice(1,0,'orange','purple')
        },
        handleReplace(){
            this.arr3.splice(1,2,'#009900','#0000ff')
        }
    }
}
</script>