Vueフロントエンドの効率的な開発のためのレンダリング手順をリストします

<本文>
    <スタイル>
        * {
            マージン: 0px;
            パディング: 0px;
        }
        
        ul {
            リストスタイル: なし;
        }
    </スタイル>
    <!--データを走査-->
    <div id="アプリ">
        <!--項目: キー-->
        <!--値: 値-->
        <!--インデックス: 下付き文字-->
        <ul v-for="(item,value,index) 人">
            <li>{{インデックス}}:{{値}}:{{項目}}</li>
        </ul>
    </div>
    <script src="js/Vue.js"></script>
    <スクリプト>
        新しいVue({
            el: "#app",
            データ： {
                テキスト: 「私たちの旅は星と海へ！」
                arr: ["マカバカ", "うーん", "リトル・ドット", "トム・ブリド", "ディン・ディン・カー"],
                人々：
                    id: 1,
                    名前:「チョウ・ユンファ」
                    年齢: 65
                }
            }
        })
    </スクリプト>
</本文>

        <table class="table table-hover table-border">
            <tr class="info">
                <th>番号</th>
                <th>名前</th>
                <th>年齢</th>
                <th>はじめに</th>
            </tr>
            <tr v-for="リスト内の項目">
                <td>{{item.id}}</td>
                <td>{{アイテム名}}</td>
                <td>{{item.age+"岁"}}</td>
                <td>{{item.show}}</td>
            </tr>
        </テーブル>

    <スクリプト>
        新しいVue({
            el: "#app",
            データ： {
                「リスト」: [{
                    "id": 1,
                    "名前": "張三",
                    「年齢」: 18,
                    "show": "張三の紹介"
                }, {
                    "id": 2,
                    "名前": "李思",
                    「年齢」: 19,
                    "show": "李斯の紹介"
                }, {
                    "id": 3,
                    "名前": "王武",
                    「年齢」: 20,
                    "show": "王武の紹介"
                }, {
                    "id": 4,
                    "名前": "趙劉",
                    「年齢」: 21,
                    "show": "趙劉の紹介"
                }, {
                    "id": 5,
                    "名前": "孫巴",
                    「年齢」: 22,
                    "show": "Sun Ba の紹介"
                }]
            }
    </スクリプト>

        <p><input type="text" v-model="selectkey" placeholder="入力してください"></p>

            計算: {
                新しいリスト: 関数() {
                    var _this = これ;
                    _this.lists.filter(function(val) { を返します
                        val.name.indexOf(_this.selectkey) != -1 を返します。
                    })
                }
            }

        <p class="input-group">
            <span class="input-group-addon">番号:</span>
            <input type="text" v-model="id" placeholder="番号を入力してください" class="form-control">
        </p>
        <p class="input-group">
            <span class="input-group-addon">名前:</span>
            <input type="text" v-model="name" placeholder="お名前を入力してください" class="form-control">
        </p>
        <p class="input-group">
            <span class="input-group-addon">年齢:</span>
            <input type="text" v-model="age" placeholder="年齢を入力してください" class="form-control">
        </p>
        <p class="input-group">
            <span class="input-group-addon">情報:</span>
            <input type="text" v-model="show" placeholder="情報を入力してください" class="form-control">
        </p>
        <p class="input-group">
            <button @click="add()" class="btn btn-primary">情報を追加</button>
        </p>

<td>
	<button v-on:click="dels(item.id)" class="btn btn-primary">削除</button>
</td>

            メソッド: {
                追加: 関数() {
                    var 女の子 = {
                        "id": this.id,
                        "名前": this.name,
                        "年齢": this.age,
                        "表示": this.show
                    }
                    this.lists.push(女の子);
                },
                削除: 関数(o) {
                    // 添え字を削除し、いくつか削除します for (let i = 0; i < this.lists.length; i++) {
                        if (this.lists[i].id == o) {
                            this.lists.splice(i, 1);
                        }
                    }
                }
            }

時計：
        最初: 関数 (val) {
               this.full = val + ' ' + this.last
        },
        最後: 関数 (val) {
               this.full = this.first + ' ' + val
       }
}