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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL アクティブ-アクティブ同期レプリケーションの 4 つのソリューションの詳細な説明
推薦する
MySQL 8.0.17 解凍版のインストールと設定方法のグラフィックチュートリアル
インストール中に遭遇した問題を記録しておきますので、皆様のお役に立てれば幸いです。 1. ダウンロー...
MySQL の日付関数と日付変換およびフォーマット関数
MySQL は、膨大なユーザーベースを持つ無料のリレーショナル データベースです。この記事では、My...
要素 el-table テーブルの二次カプセル化 (テーブルの高さの調整付き)
序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...
Vueはページdivボックスのドラッグアンドドロップソート機能を実装します
vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文...
jQuery エディタ プラグイン tinyMCE の使い方
簡略化されたファイル サイズを変更し、サンプルをダウンロードします。ファイルをローカル コンピュータ...
経験者のHTMLの書き方と理由の分析
1. ナビゲーション: 順序なしリストとその他のラベル要素ナビゲーションを記述するために最も一般的に...
MySQL 8.0 の新機能 - チェック制約の紹介
目次序文チェック制約作成、削除、表示制限要約する序文MySQL 8.0 では、チェック制約という非常...
Vue3 + TypeScript 開発の概要
目次Vue3 + TypeScript 学習1. 環境設定1.1 最新のVue scaffoldin...
docker.service 起動エラーの詳細なトラブルシューティング
エラーを報告するには次のコマンドを実行しますsystemctl dockerを再起動しますエラーメッ...
Webデザインチュートリアル（2）：模倣と盗作について
<br />前回の記事では、Webデザインの手順と方法を紹介しました。詳細については、前...
純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法
プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...
Webデザインチュートリアル（8）：Webページの階層と空間デザイン
<br />前回の記事：Webデザイン講座（７）：Webページ制作の効率化１：必要な小言...
Vueはランニングライトのシンプルな効果を実現
この記事では、マーキーのシンプルな効果を実現するためのVueの具体的なコードを参考までに共有します。...
Nginx ソースコード調査における nginx 電流制限モジュールの詳細な説明
目次1. 電流制限アルゴリズム2. nginxの基礎知識4. 実戦要約する高並行性システムには、キャ...
Vue.js パフォーマンス最適化 N 個のヒント (収集する価値あり)
目次機能コンポーネント子コンポーネントの分割ローカル変数v-show によるDOMの再利用キープアラ...