Vueはカウンターのシンプルな生成を実装します
|
この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです。 プロセスの考慮事項
実際のコードとスクリーンショット
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>カウンター</title>
</head>
<本文>
<div id="アプリ">
<!--カウンター機能エリア-->
<div class="input-num">
<ボタン @click="sub">
-
</ボタン>
<span>{{数値}}</span>
<ボタン @click="追加">
+
</ボタン>
</div>
</div>
<!-- 開発バージョン、便利なコマンドライン警告を含む -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
//vueインスタンス var app = new Vue({
el:"#アプリ",
データ： {
番号:1
},
メソッド: {
追加:関数(){
//コンソール.log('追加')
if(this.num<10){
this.num++;
}それ以外{
alert('クリックしないでください。一番大きいものです!');
}
},
サブ:関数(){
//コンソールログ('sub')
if(this.num>0){
this.num--;
}それ以外{
alert('クリックしないでください。最小値です!');
}
}
},
})
</スクリプト>
</本文>
</html>
vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux での MySQL の文字化け問題の解決方法
>>: win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する
推薦する
vscode を使用したリモート Linux 開発の実装
過去に別れを告げるvscode にリモート SSH が導入される前は、Linux サーバー開発者の多...
小さなアイコンのフロントエンド処理ソリューションのグラフィカルな説明
序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...
この記事はPReact10.5.13のソースコードを理解するのに役立ちます
目次render.js 部分create-context.js 部分差分部分Reactのソースコード...
クロスドメインの問題を解決するためのNginxの実用的な方法
フロントエンドとバックエンドを分離し、nginxを使用してクロスドメインの問題を解決するフロントエン...
Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項
1つのポートの変更バージョン 3.2.0 では、ネームノード ページ ポートは 9870、データノー...
CSS を使用して正方形の div を実装する 2 つの方法
目標: 辺の長さが等しい正方形を作成する方法 1: 単位 vw を使用する (ps これが最も簡単な...
ElasticSearch と ElasticSearch-Head の Docker デプロイメントの実装
この記事では主にDockerを使ってElasticSearch:バージョン6.8.4をデプロイする方...
Vue で棒グラフを使用し、自分で設定を変更する方法
1. HTMLファイルでechartをインポートする <!-- echarts をインポート ...
相同性とクロスドメイン、jsonp（関数カプセル化）、CORS原則の詳細な分析
目次同一起源ポリシーAjax リクエストの制限: Ajaxは自身のサーバーにのみリクエストを送信でき...
ApacheとTomcatによるクラスタ環境構築プロセスの分析
実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...
::before/:before と ::after/:after の使用に関する深い理解
パート1: 基礎1. :active や :hover などの疑似クラスとは異なり、これらはすべて疑...
CentOS 7 で MySQL 8 の複数のインスタンスを設定する詳細なチュートリアル (必要な数だけ設定できます)
原因最近、プロジェクトのリファクタリングを始めたのですが、マスタースレーブと読み取り書き込み分離を使...
DockerコンテナにNFS共有ディレクトリをマウントする実装
以前、https://www.jb51.net/article/205922.htm で、Docke...
Dockerのデフォルトネットワークセグメントを変更する実装方法の分析
背景同社のサーバーはすべて Alibaba Cloud ECS ホストを購入しています。デフォルトの...
RocketMQ の Docker インストールとインストール中に発生した問題の解決策
目次rocketmqイメージを取得する名前rvを作成する単一のブローカーノードを作成するrocket...