Vueの練習三〇から四：04_07_様々な配列方法演習

デモオンラインアドレス：
https://sx00xs.github.io/test/34/index.html
----------------------------- ----------------------------------
IDE：VSCode
ファイル形式：.vue
に完成する決意:(）

<テンプレート> 
    <DIV> 
        <DIV = "DIV1"クラス> {{arr1.toStringは（）}} </ div> 
        の<input type = "ボタン" Vモデル= "MES1" @ = "handleFirst"をクリック/> 
        <入力タイプ= "ボタン" Vモデル= "MES2" @クリック= "handleLast" /> 
        <DIV CLASS = "DIV1"> {{arr2.toString（）}} </ div> 
        の<input type = "ボタン"値= "复制" @クリック= "handleCopy" /> 
        の<input type = "ボタン"値= "还原" @クリック= "handleReset" /> 
        <DIV CLASS = "DIV1"> {{arr3.toString（）}} < / DIV> 
        の<input type = "ボタン"値= "还原" @ = "handleReset1"をクリックしてください/> 
        <INPUTタイプ= "ボタン"値は= "最初の3を削除" =クリックして"handleRemoveThree" /> @  
        =「3への第二の削除」@ =「handleRemoveTwo」/クリック<種類のINPUT =「ボタン」値 >を
        <INPUTタイプ= "ボタン"値= @をクリックし、 "第二（オレンジ、パープル）の後に挿入されています" = "handleInsert" />
        <input type = "ボタン"値 = " あるいは第二及び第三の用語" =クリック"handleReplace" / @> 
    </ div> 
</テンプレート> 
<SCRIPT> 
エクスポートデフォルト{ 
    データ（）{ 
        リターン{ 
            BS1である：trueに、
            BS2こと：trueに、
            MES1： '1月の削除（1）' 、
            MES2： '12月（12です）を削除' 、
            ARR1の：[
             '（1）1月'、 '2月（2）'、 '月（3）'、 ' 4月（4） ''月 （5） '' 6月（6） '' 7月（7） '' Aguest（8） '' 9月（9） '' 10月（10） '' 11月（11） '' 12月（6月（6） '' 7月（7） '' aguest（8） '' 9月（9）、 '' 10月（10） '' 11月（11） '' 12月（12 '） 
        ]
            ARR2：[
             0,1,2,3,4,5,6,7,8,9 
        ]、
            ARR3：
             '赤'、 '緑'、 '青'、 '白'、 '黄' '黒' '褐色' 
        ] 
        } 
    }、
    メソッド：{ 
        handleFirst（）{ 
            この .bS1？
            （この .arr1.shift（）、この .mes1 = この .mes1.replace（ '删除'、 '添加'）、この .bS1 = 偽）： 
            （この .arr1.unshift（ '1月（1）'）、この .mes1 = この .mes1.replace（ '添加'、 '删除'）、この。BS1 = 真）。
            
        }、
        handleLast（）{ 
            この .bS2？
            （この .arr1.pop（）、）この .mes2 = この .mes2.replace（ '删除'、 '添加'）、この .bS2 = 偽）： 
            （この .arr1.push（ '12月（12）'）、この .mes2 = この .mes2.replace （ '添加'、 '删除'）、この .bS2 = 真）。
        }、
        handleCopy（）{ 
            この .arr2 = この .arr2.concat（この.arr2）
        }、
        handleReset（）{ 
            この .arr2 = この .arr2.slice（0,10 
        }、
        handleReset1（）{ 
            この .arr3 = [ '赤'、 '緑'、 '青'、 '白'、 '黄色'、 '黒' 'ブラウン' ] 
        }、
        handleRemoveThree（）{ 
            この .arr3.splice （0,3 ）
        }、
        handleRemoveTwo（）{ 
            この .arr3.splice（1,2 ）
        }、
        handleInsert（）{ 
            この .arr3.splice（1,0、 'オレンジ'、 '紫' ）
        }、
        handleReplace（） { 
            この .arr3.splice（1,2、 '＃009900'、 '＃1 0000FF' ）
        } 
    } 
}
 </ SCRIPT>