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を使用する方法の詳細な説明

推薦する

MySQL が my.cnf を読み込む順序の詳細

目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...

MySQLシリーズのMariaDBサーバーのインストール

目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...

CentOS7 で ethereum/Ethereum を最初からインストールする

目次序文sudo書き込み権限を追加するgit 2.9.0をインストールopenssl 1.1.1l ...

vue-router のハッシュモードと履歴モードの違い

vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...

エージェントを介したzabbix監視プロセスとポートの詳細なプロセス

環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...

HTML テーブルの空白セル補完を実装する方法

私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レ...

SpringBoot を MySQL に接続してデータを取得し、バックエンド インターフェースに書き込む方法

目次1. 新しいプロジェクトを作成する2. 依存関係を追加する3. SpringコンテナにDrive...

Mysqlがデータベースに接続するときのホストとユーザーのマッチングルールについての簡単な説明

--データベースに接続するとき、ホストとユーザーのマッチングルール公式ドキュメント: https:/...

binlog2sql と簡単なバックアップおよびリカバリを使用して mysql8.0.20 を構成するための詳細な手順

目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...

CSS3 @mediaの基本的な使い方のまとめ

//文法: @media mediatype and | not | only (メディア機能) ...

MySQLで更新可能なビューを作成する方法の詳細な説明

この記事では、例を使用して、MySQL で更新可能なビューを作成する方法について説明します。ご参考ま...

JavaScript DOM オブジェクト操作

目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...

MySQLにおけるトランザクションの永続性実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...

MySQL テーブルを返すとインデックスが無効になるケースの説明

導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...

Docker で Node プロジェクトをビルドしてデプロイする方法

目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...