vue-tableは追加と削除を実装します

vue-tableは追加と削除を実装します

この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

1. コード

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>vue-table の例</title>
    <スタイル>
        .テーブルボックス{
            高さ: 自動;
            幅: 90%;
            マージン: 5% 自動;
        }

        。テーブル {
            境界線の折りたたみ: 折りたたみ;
            幅: 100%;
            高さ: 自動;
        }

        h1 {
            テキスト配置: 中央;
        }
    </スタイル>
</head>
<本文>
<div id="アプリ">
    <div class="table_box">
        <h1>テーブルエクササイズ</h1>
        <input type="text" v-model="text"/>
        <button @click="add">追加</button>
        <テーブルクラス="テーブル" 境界線="1">
            <頭>
            <tr>
                <th>シリアル番号</th>
                <th>ブランド</th>
                <th>時間</th>
                <th>オペレーション</th>
            </tr>

            </thead>
            <t本文>
            <tr v-for="(v,k) リスト内" :key="k">
                <th>{{v.id}}</th>
                <th>{{v.name}}</th>
                <th>{{v.time}}</th>
                <番目>
                    <a href="#" @click.prevent="del(k)">削除</a>
                </th>
            </tr>
            </tbody>
        </テーブル>
    </div>

</div>
</本文>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<スクリプト>

    var vm = 新しい Vue({
        el: '#app',
        データ: {
            番号: 1,
            リスト: [],
            文章: ''、

        },
        メソッド: {
            追加: 関数 () {
                this.list.unshift({
                    "id": this.num++,
                    "名前": this.text,
                    "time": 新しい Date().toLocaleString(),
                });
            },
            del: 関数 (インデックス) {
                if (confirm("現在の行を削除してもよろしいですか")) {
                    this.list.splice(インデックス、1);
                }

            },

        }
    });
</スクリプト>

2. 運用効果

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Antd-vue テーブルコンポーネントは、データ行をクリックするためのクリックイベントを追加します。チュートリアル
  • vuejs 要素テーブル テーブル行の追加、変更、行の個別削除、行の一括削除
  • VUE テーブルは動的にデータ列を追加し、新しく追加されたデータは編集できません (v-model にバインドされたデータはリアルタイムで更新できません)

<<:  MySQL アクティブ-アクティブ同期レプリケーションの 4 つのソリューションの詳細な説明

>>:  Linuxでawkを使用する方法の詳細な説明

推薦する

タブステータスバーの切り替え効果を実現するための js と jQuery

今日は、タブ バーをクリックして切り替えるという目的を実現するために、js と jQuery を使用...

CSS トランジションを使用した円形ホバー効果のサンプルコード

この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...

MySQLがクエリキャッシュをキャンセルした理由

MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...

MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明

降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...

Dockerfile 内の予約語命令の解析処理

目次1. Dockerfile とは何ですか? 2. Dockerfile構築プロセスの分析3. D...

WeChatアプレット+mqtt、esp8266温度と湿度の読み取り実装方法

まず、 esp8266 は mqtt を通じてメッセージを公開し、WeChat アプレットは mqt...

HTML CSS JS はタブページのサンプルコードを実装します

コードをコピーコードは次のとおりです。 <html xmlns="">...

Linux Zabbixカスタム監視およびアラーム実装プロセスの分析

ターゲットzabbix フロントエンド監視の iostat コマンドでデータの 1 つを表示します。...

vue.jsは画像のURLに従って画像をダウンロードします

最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...

写真とテキストによる MySQL 8.0.21 インストール チュートリアル

1. ダウンロードリンクをダウンロードするダウンロードをクリックします。Oracle アカウントにロ...

Linux mysql-5.6 でルート パスワードをリセットする方法

1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...

MySQL 8.0 ディクショナリテーブル拡張の詳細な説明

MySQL のデータ ディクショナリは、データベースの重要なコンポーネントの 1 つです。INFOR...

Alibaba Cloud OSS アクセス権設定(RAM 権限制御)実装

シナリオmyBuket の static/material/ ディレクトリなど、Alibaba Cl...

選択にスタイルを追加するための純粋な CSS (スクリプトなし) 実装

通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...

MySQL でのテーブルの作成と削除の詳細な例

テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...