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 つのソリューションの詳細な説明
推薦する
goaccess を使用して nginx ログを分析する詳細な方法
最近、goaccess を使って nginx ログを分析したいのですが、nginx ログの設定形式が...
Linux に JDK Tomcat MySQL をインストールするチュートリアル (Mac を使用したリモート アクセス)
一つの環境Alibaba Cloud Server: CentOS 7.4 64 ビット (RedH...
ウェブページ作成時に標準 HTML コードを使用する際のポイント
多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...
CSSカウンター関連属性の学習の詳細な説明
CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使...
MySQL 子テーブルで外部キー制約チェックを無効にする方法
準備する：教師テーブルと生徒テーブルを定義し、生徒テーブルで教師テーブルIDを参照します。テーブルt...
MySQLデータベースのトランザクションとインデックスの詳細な説明
目次1. 事務：取引の 4 つの主な特徴:同時トランザクションはどのような問題を引き起こしますか? ...
Windows Apache 環境で SSL 証明書を展開して、Web サイトを https 対応にする方法
SSL 証明書の使用についてはここでは説明しません。SSL 証明書を導入する必要がある友人は、すでに...
jsでユーザー登録機能を実装する
この記事の例では、ユーザー登録機能を実装するためのjsの具体的なコードを参考までに共有しています。具...
Vueのドラッグ可能なコンポーネントであるVue Smooth DnDの使用方法の詳細な説明
目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...
DockerコンテナでJupyterノートブックを設定する方法
Jupyter ノートブックは、主に Python コードの記述、より具体的にはディープラーニング開...
MySQL Community Server 5.6.39 のインストール方法
この記事では、MySQLのダウンロードとインストールの詳細なチュートリアルを記載しています。具体的な...
MySQL で結果を選択して更新を実行する例のチュートリアル
1. 単一テーブルクエリ -> 更新 テーブル名の更新 フィールド1=新しい値1、フィールド2...
CentOS 6 ZLMediaKit のコンパイルとインストール分析
Centos6にZLMediaKitをインストールするZLMediaKit の作者は Ubuntu ...
HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...
Ubuntu 20.04でルートアカウントを有効にする方法
Ubuntu 20.04 をインストールした後、デフォルトでは root アカウントのログイン権限が...