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 つのソリューションの詳細な説明
推薦する
タブステータスバーの切り替え効果を実現するための js と jQuery
今日は、タブ バーをクリックして切り替えるという目的を実現するために、js と jQuery を使用...
CSS トランジションを使用した円形ホバー効果のサンプルコード
この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...
MySQLがクエリキャッシュをキャンセルした理由
MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...
MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明
降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...
Dockerfile 内の予約語命令の解析処理
目次1. Dockerfile とは何ですか? 2. Dockerfile構築プロセスの分析3. D...
WeChatアプレット+mqtt、esp8266温度と湿度の読み取り実装方法
まず、 esp8266 は mqtt を通じてメッセージを公開し、WeChat アプレットは mqt...
HTML CSS JS はタブページのサンプルコードを実装します
コードをコピーコードは次のとおりです。 <html xmlns="">...
Linux Zabbixカスタム監視およびアラーム実装プロセスの分析
ターゲットzabbix フロントエンド監視の iostat コマンドでデータの 1 つを表示します。...
vue.jsは画像のURLに従って画像をダウンロードします
最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...
写真とテキストによる MySQL 8.0.21 インストール チュートリアル
1. ダウンロードリンクをダウンロードするダウンロードをクリックします。Oracle アカウントにロ...
Linux mysql-5.6 でルート パスワードをリセットする方法
1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...
MySQL 8.0 ディクショナリテーブル拡張の詳細な説明
MySQL のデータ ディクショナリは、データベースの重要なコンポーネントの 1 つです。INFOR...
Alibaba Cloud OSS アクセス権設定（RAM 権限制御）実装
シナリオmyBuket の static/material/ ディレクトリなど、Alibaba Cl...
選択にスタイルを追加するための純粋な CSS (スクリプトなし) 実装
通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...
MySQL でのテーブルの作成と削除の詳細な例
テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します（タイ...