image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    7. </head>
    8. <body>
    9. <div id="app">
    10.     <input type="text" name="todoitem" v-model="newitem">
    11.     <button @click="add">添加</button>
    12.     <hr>
    13.     <ul>
    14.         <li v-for="(item, idx) in items">
    15.             {{item}}
    16.             <a href="#" @click="up(idx)">上移</a>
    17.             <a href="#" @click="down(idx)">下移</a>
    18.             <a href="#" @click="deleteitem(idx)">删除</a>
    19.         </li>
    20.     </ul>
    21. </div>
    22. </body>
    23. <script>
    24.     var vm = new Vue({
    25.         el: "#app",
    26.         data: {
    27.             message: "hello",
    28.             items: ["学习html", "学习python", "学习mysql"],
    29.             newitem: "",
    30.         },
    31.         methods: {
    32.             add: function () {
    33.                 this.items.push(this.newitem);
    34.                 this.newitem = "";
    35.             },
    36.             deleteitem: function (idx) {
    37.                 this.items.splice(idx, 1);
    38.             },
    39.             up: function (idx) {
    40.                 cur_item = this.items[idx];
    41.                 this.items.splice(idx, 1);
    42.                 this.items.splice(idx-1, 0, cur_item);
    43.             },
    44.             down: function (idx) {
    45.                 cur_item = this.items[idx];
    46.                 this.items.splice(idx, 1);
    47.                 this.items.splice(idx+1, 0, cur_item);
    48.             }
    49.         }
    50.     })
    51. </script>
    52. </html>