[Vue.js] 操作陣列

by ShadowKao

HTML

<!doctype html>
<html>
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>Hello, Vue.js!</title>
    <style type="text/css">
        body {
            padding-top: 30px;
        }  
    </style>
</head>
<body> 
    <div class="container" id="myApp">
        <div class="row">
            <div class="form-group col-12">
                <button type="button" class="btn btn-warning" v-on:click="EditMyArray">把myArray的b替換成z</button>
                <button type="button" class="btn btn-danger" v-on:click="ClearMyArray">清除myArray</button>
                <button type="button" class="btn btn-success" v-on:click="RestoreMyArray">恢復myArray</button>
            </div>
            <div class="form-group col-12">
                顯示myArray資料↓
                <ul v-if="myArray.length>0">
                    <li v-for="(item , index) in myArray" v-text="item"></li>
                </ul>

            </div> <!--end .form-group-->
            <div class="form-group col-12">
                <button type="button" class="btn btn-warning" v-on:click="Editinit_users">把init_users的username Allen替換成ALLEN</button>
                <button type="button" class="btn btn-danger" v-on:click="Clearinit_users">清除init_users</button>
                <button type="button" class="btn btn-success" v-on:click="Restoreinit_users">恢復init_users</button>
            </div>
            <div class="form-group col-12">
                顯示init_users資料↓
                <ul v-if="init_users.length>0">
                    <li v-for="(user , index) in init_users">
                        id:{{user.id}}
                        <b> username:{{user.username}} </b>
                        email:{{user.email}}...