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文がどのように実行されるかの詳細な説明
推薦する
CSS属性のデフォルト値width: autoとwidth: 100%の違いの詳細な説明
幅: 自動子要素（コンテンツ+パディング+境界線+余白を含む）は、親要素のコンテンツ領域全体を埋めま...
HTMLポップアップ透明レイヤーインスタンスのサイズを設定でき、比例することができます
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
一般的なブラウザのユーザーエージェントの概要
1. 基礎知識: HTTP ヘッダー ユーザーエージェントユーザー エージェントは、ユーザー エージ...
HTMLで下線を設定するには？HTMLでテキストに下線を付ける方法
HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...
ECMAScript のイテレータの詳細な説明
目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...
MySQL InnoDB テーブルスペース暗号化の例の詳細な説明
序文MySQL 5.7.11 以降、MySQL は、別の表領域に格納された InnoDB テーブルの...
nginx で SSL 証明書を設定して https サービスを実装する方法
前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...
nginx がアップストリーム アドレスにジャンプしない問題の解決方法
序文今日、nginx で非常に奇妙な問題に遭遇しました。フロントエンドの tomcat がページにジ...
ゲーム着物メモ問題の簡単な分析
本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...
Centos7でmysql6の初期化インストールパスワードをインストールする方法
1. まずデータベースサーバーを停止しますサービスmysqld停止2.vim /etc/my.cnf...
MySQL 最適化戦略 (推奨)
要約すれば： 1. データベースの設計とテーブルの作成時にパフォーマンスを考慮する2. SQLの記述...
Ember.js と Vue.js の詳細な比較
目次概要フレームワークを選択する理由は何ですか? js のエンバーEmber.js と Vue.js...
vscodeでnpmを使用してbabelをインストールする方法
序文前回の記事ではNode.jsのインストールと設定を紹介しました。今回はVScodeでbableを...
JavaScript es6 の新しい配列メソッドの詳細な説明
目次1. 各() 2. arr.filter() 3. arr.every() 4. arr.map...
CSSアニメーションに基づくSVGボタンのサンプルコード
具体的なコードは次のとおりです。 <a href="#"> <...