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 つのソリューションの詳細な説明
推薦する
VueプロジェクトにPWAを導入する手順
目次1. 依存関係をインストールする2. vue.config.js ファイルで pwa を設定しま...
CSS3は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。
この場合、transition という単語を間違って書いたため、午後中ずっとそれに取り組みました。本...
入力タイプの制限（複数の方法）
1. 入力・貼り付けできるのは中国語のみ<input onkeyup="value=...
JavaScriptはクリックするとランダムなグラフィックを生成します
この記事では、クリックするとランダムグラフィックの生成を実現するJavaScriptの具体的なコード...
MySQL 5.7 および 8.0 データベースのルート パスワードを忘れた場合の解決策
注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...
MySQLコンテナ間のレプリケーション構成例の詳細な説明
背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...
nginx ベースのブラウザネゴシエーションキャッシュプロセスの詳細な説明
この記事は主に、nginx に基づいてブラウザネゴシエーションキャッシュを設定する詳細なプロセスを紹...
ブラウザでのjsのイベントループイベントキューの詳細な説明
目次序文スタックと2つのキューを理解する実行プロセス簡単な例より難しい例要約する序文以下の内容はブラ...
NestJsはMongooseを使用してMongoDBを操作する
最近、NestJs フレームワークを学び始めました。学習コストは他のフレームワークよりもはるかに高く...
Pengyou.com モバイル クライアントのダウンロード ページのデザイン共有 (画像とテキスト)
まずは簡単なデータを見てみましょう。 Googleが発表したレポートによると、 ①中国の都市の97％...
JavaScriptアップロードファイル制限パラメータケースの詳細な説明
プロジェクトシナリオ: 1. アップロードファイルの制限関数： 1. フロントエンド操作による異常な...
Docker で MySQL をインストールし、リモート接続を実装するチュートリアル
画像をプルする docker プル mysql完成した画像を見る Docker イメージイメージを介...
Vue.js のミックスインの詳細な説明
ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...
HTML テーブル_Powernode Java アカデミー
HTMLで表を描くには、表タグを使用します。 trは行を意味しますtdは列を示すth はテーブ...
MySQLインデックスの基本構文
インデックスはソートされたデータ構造です。 where 条件での検索や order by 条件での並...