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文がどのように実行されるかの詳細な説明
推薦する
vue3 を使用したジグソーパズルゲームのリファクタリングの例
序文プロジェクト内のパズルゲーム（デジタル華容路とも呼ばれる）を再構築するのに 2 日かかりました。...
Docker で既存のイメージに基づいて新しいイメージを構築する方法
既存のイメージから新しいイメージを構築することは、Dockerfile ドキュメントを通じて行われま...
Linux コマンドラインでメールを送信する 5 つの方法 (推奨)
シェル スクリプトで電子メールを作成する必要がある場合は、コマンド ラインから電子メールを送信する知...
Packetdrillの簡潔なユーザーガイド
1. Packetdrillのコンパイルとインストールソースコードリンク https://githu...
イラスト風ウェブサイトホームページデザイン ウェブサイトデザインの新トレンド
視覚効果が非常に美しく、訪問者に強い印象を残すことがわかります。さらに、重要なポイントが強調され、訴...
nginx httpモジュールのデータ保存構造の概要
このセクションから、http モジュールの実装原理について説明します。http モジュールで非常に重...
vue3 のさまざまなファイルタイプのプレビュー機能の例
目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...
Linux で Nginx ロード バランシングを使用して複数の Tomcat を構成する方法
Linux に nginx と複数の tomcat をインストールする方法はここでは紹介しません。不...
vue-cli の紹介とインストール
目次1. はじめに2. vue-cli の紹介2.1 コマンドライン2.2 CLI サービス2.3 ...
Mybatis での動的 SQL ステートメント分析
この記事は主にMybatisでの動的SQL文の解析について紹介します。この記事のサンプルコードは非常...
Vueは要素ツリーコントロールを通じてツリーテーブルを実装します
目次実装効果図依存関係をインストールするカスタムツリーコントロールその他の実装要約するVueでは、要...
Vueプロジェクトのパッケージングと展開の実際のプロセスの記録
目次序文1. 準備 - サーバーとnginxの使用1. サーバーを準備する2. nginxをインスト...
ウェブサイトの高速化における CDN、SCDN、DCDN の違いは何ですか?どうやって選ぶ？
1. CDNこれは、Web サイト上で最もよく使用される加速機能です。分散サーバー レイアウトによ...
CSS3で線形グラデーションを実装するためのコードの詳細な説明
序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...
Promiseの紹介と基本的な使い方の簡単な分析
Promise は、ES6 で導入された非同期プログラミングのための新しいソリューションです。 Pr...