Vue実装のカウンターケース
|
この記事では、カウンター表示を実現するためのVueの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。 効果：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>カウンター</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スタイル タイプ="text/css">
＃アプリ{
テキスト配置: 中央;
マージン: 0 自動;
行の高さ: 500px;
}
#アプリ入力{
幅: 50px;
高さ: 40px;
フォントサイズ: 20px;
境界線の半径: 5px;
アウトライン: なし;
/* カスタム境界線 */
境界線: 1px 透明の実線;
背景色: 青;
行の高さ: 30px;
色: 白;
}
#アプリスパン{
パディング: 20px 20px;
境界線: 1px;
}
</スタイル>
</head>
<本文>
<div id="アプリ">
<input type="button" value="-" @click="sub"/>
<span>{{数値}}</span>
<input type="button" value="+" @click="追加"/>
</div>
<スクリプト>
var アプリ = 新しい Vue({
el: "#app",
データ： {
番号: 1
},
方法:{
追加: 関数(){
if(this.num<10){
this.num++;
}それ以外{
alert("最大値に達しました!");
}
},
サブ: 関数(){
if(this.num>0){
this.num--;
}それ以外{
alert("消えたよ!");
}
}
}
})
</スクリプト>
</本文>
</html>
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux スレッド間の同期と排他制御の知識ポイントのまとめ
>>: MySQLでSQL文がどのように実行されるかの詳細な説明
推薦する
読み取り専用と無効の違い
要約すると: Readonly は入力 (テキスト/パスワード) とテキスト領域に対してのみ有効です...
MySQL Strict Modeの知識ポイントの詳細な説明
I. 厳密モードの説明MySQL 5.0 以降の厳密モード (STRICT_TRANS_TABLES...
Zabbixを使用してOracleテーブルスペースの操作プロセスを監視する
0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...
CSS フロントエンドページレンダリング最適化属性 will-change の具体的な使用法
序文スクロールやサイズ変更などのスクロール イベントがトリガーされると、トリガーの頻度が非常に高くな...
Linux 上での MySQL データベースのリモート展開の詳細な手順
LinuxリモートMySQLデータベースの展開、参考までに、具体的な内容は次のとおりです。 1.0 ...
CSS 手法を使用してモジュール性を実現する例
1. CSS 方法論とは何ですか? CSS methodologiesデザイン パターンまたは CS...
Flexレイアウトとスケーリング計算についての簡単な説明
1. Flexレイアウトの紹介Flex は Flexible Box の略で、「柔軟なレイアウト」を...
スライド階段効果を実現するjQuery
この記事では、階段スライド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具...
単純なCSSの詳細に惚れ込むと、重要ではないものの、効率性が向上する可能性がある
CSS の将来は非常に楽しみです。一方では、まったく新しいページ レイアウト方法であり、他方では、ク...
自動ヘルスレポートを実現するDocker+Selenium方式
この記事では、ある大学の健康報告システムを例に、Web 側の自動化操作を完成させます。使用したテクノ...
Spring環境を構成するためのDocker-composeの手順
最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...
CentOSにDockerをインストールする方法
ここでは比較的簡単なインストール方法のみを紹介します。 1. yumを使用してインストールするyum...
HTMLのimgタグで画像の中心部分だけを表示する方法（3つの方法）
HTML の img タグで画像の中心を表示する方法は、現在 3 つあります。ここで記録しておきま...
Ubuntu 20.04 中国語入力方法のインストール手順
この記事では、Google 入力方法をインストールします。実は以前はSogou入力方式を使っていたの...
MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)
Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...