この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL アクティブ-アクティブ同期レプリケーションの 4 つのソリューションの詳細な説明
目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...
目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...
目次序文sudo書き込み権限を追加するgit 2.9.0をインストールopenssl 1.1.1l ...
vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...
環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...
私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レ...
目次1. 新しいプロジェクトを作成する2. 依存関係を追加する3. SpringコンテナにDrive...
--データベースに接続するとき、ホストとユーザーのマッチングルール公式ドキュメント: https:/...
目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...
//文法: @media mediatype and | not | only (メディア機能) ...
この記事では、例を使用して、MySQL で更新可能なビューを作成する方法について説明します。ご参考ま...
目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...
序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...
導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...
目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...