Vueはシンプルなデータ双方向バインディングを実装します
|
この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。 初心者でも理解しやすいよう、シンプルな実装を紹介します。もちろん双方向データプロキシを実現するには Vue が欠かせません。今後のアップデートに期待しています。 Vue 双方向データバインディング -> Object.defineProperty() //2.0 コア構文
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8" />
<meta http-equiv="X-UA-compatible" content="IE=edge" />
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
<title>ドキュメント</title>
</head>
<本文>
<input type="text" id="ipt" />
<p id="lc"></p>
</本文>
</html>
<スクリプト>
//ページ要素を取得します。var ipt = document.getElementById("ipt");
var ps = document.getElementById("lc");
var obj = { 名前: "" };
//vue 双方向データバインディングの基本原則 applicationObject.defineProperty(obj, "name", {
得る（） {
ipt.value を返します。
},
set(newval) {
ipt.value = newval;
ps.innerHTML = newval;
},
});
//入力データの変更を監視し、pタグに値を割り当てます ipt.addEventListener("keyup", function() {
ps.innerHTML = ipt.value;
});
</スクリプト>エフェクト表示:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Windows Server のインストール後にワイヤレスとオーディオが機能しない問題を解決する
推薦する
mysql8.0.12 でルートパスワードをリセットする方法
データベースをインストールした後、誤ってインストール ウィンドウを閉じたり、長期間 root ユーザ...
MySQL ページングパフォーマンスの調査
一般的なページング方法: 1. エスカレーター方式エスカレーター方式では通常、前のページ/次のページ...
Linux での grep コマンドの使い方の詳細な説明
1. 公式紹介grep は Linux でよく使用されるコマンドです。これは、ファイルやテキストに対...
HTML で vue-router を使用するサンプル コード
vue と vue-router の紹介 <script src="https://...
Linux コマンドを使用してオーディオ形式を変換および結合する方法
FFmpeg flacをインストールする eric@ray:~$ sudo apt install ...
MySQL ロック制御同時実行方法
目次序文1. 楽観的ロックバージョンフィールドを追加する2. 悲観的ロック読み取りロック完全なテーブ...
完璧なアロエベラジェルを選ぶには？完璧なアロエベラジェルの本物と偽物の見分け方
最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...
Vue は URL に基づいて非同一オリジンのファイルをどのようにダウンロードするのか
一般的に、URL に基づいてファイルをダウンロードする場合、次の 2 つの解決策があります。 1. ...
ネイティブJavaScriptカルーセル実装方法
この記事では、JavaScriptカルーセルの実装方法を参考までに紹介します。具体的な内容は次のとお...
さまざまなターミナルで Mac が SSH 経由でリモート サーバーに接続する方法の説明
Macはシェル（ターミナル）SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...
JavaScript における変数と関数の昇格の詳細な例
js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...
Vue で棒グラフを使用し、自分で設定を変更する方法
1. HTMLファイルでechartをインポートする <!-- echarts をインポート ...
例によるMySql CURRENT_TIMESTAMP関数の分析
時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...
MySQL のロードバランサーとして nginx を使用する方法
注意: nginxのバージョンは1.9以上である必要があります。nginxをコンパイルするときに、-...
文字列から指定された文字を削除または抽出する JavaScript メソッド (非常によく使用されます)
目次1. 部分文字列() 2. サブストラクチャ() 3.インデックス() 4.最後のインデックス(...