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 つのソリューションの詳細な説明
推薦する
モバイルデバイスにおける適応レイアウトの問題に関する簡単な説明 (レスポンシブ、rem/em、Js ダイナミクス)
3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイ...
MySQL 制約の超詳細な説明
目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...
HTML テーブルタグチュートリアル (20): 行の背景色属性 BGCOLOR
BGCOLOR 属性を使用して、行の背景色を設定できます。基本的な構文<TR BGcolor...
州と市町村の連携を簡単に実現するJavaScript
この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...
CentOS7でPHPスケジュールタスクを実行する方法
序文この記事は主に CentOS7 で PHP スケジュールタスクを実行することに関する関連コンテン...
Dockerfile 内の予約語命令の解析処理
目次1. Dockerfile とは何ですか? 2. Dockerfile構築プロセスの分析3. D...
Linux で固定 IP を設定する方法 (テスト済みで効果的)
まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...
DockerはRedisをインストールし、操作用のビジュアルクライアントを導入します
1 はじめにRedis 、 ANSI C言語で開発されたKey-Valueベースの高性能NoSQLデ...
Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決
目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...
nginx で仮想ホストを構成するための詳細な手順
仮想ホストは、インターネット上で実行されているサーバー ホストを複数の「仮想」ホストに分割する特殊な...
Element UI で自動サイズ調整テキストエリアの高さを設定する方法
Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォル...
親ページの更新を制御するために HTML で iframe を実装するためのアイデアとコード
1. 応用シナリオ親ページ a.jspサブページ b.jsp (ページ a に埋め込まれた ifra...
Vue のローカルコンポーネントの紹介
Vueでは、ローカルコンポーネントを自分で定義（登録）することができます。コンポーネント名を定義する...
Mysql トランザクション ログとログ ファイルが大きすぎて縮小できないという問題を解決します。
1. MS SQL Server 2005 --1. ログをクリアするexec('DUMP...
jsを使用して中国語からピンインへの変換の完全な手順を実行します
jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...