この記事では、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 つのソリューションの詳細な説明
今日は、タブ バーをクリックして切り替えるという目的を実現するために、js と jQuery を使用...
この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...
MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...
降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...
目次1. Dockerfile とは何ですか? 2. Dockerfile構築プロセスの分析3. D...
まず、 esp8266 は mqtt を通じてメッセージを公開し、WeChat アプレットは mqt...
コードをコピーコードは次のとおりです。 <html xmlns="">...
ターゲットzabbix フロントエンド監視の iostat コマンドでデータの 1 つを表示します。...
最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...
1. ダウンロードリンクをダウンロードするダウンロードをクリックします。Oracle アカウントにロ...
1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...
MySQL のデータ ディクショナリは、データベースの重要なコンポーネントの 1 つです。INFOR...
シナリオmyBuket の static/material/ ディレクトリなど、Alibaba Cl...
通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...
テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...