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 のインストール後にワイヤレスとオーディオが機能しない問題を解決する
推薦する
CSS ですべての子要素を選択し、スタイルを追加する方法
方法：実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...
js を使用して画像をモザイク化する方法の例
この記事では、主に js を使用して画像をモザイク化する方法の例を紹介し、次のように共有します。効果...
docker cp ファイルをコピーしてコンテナに入る
実行中のコンテナに入る # コンテナに入り、新しいターミナルを開きます# docker exec -...
nginx+WordPressで個人ブログを構築するプロセス全体の詳細な説明
0x00 はじめにWordPress は、世界で最も人気のある CMS システムです。PHP と M...
WeChatアプレットが複数行テキストのスクロール効果を実現
この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...
MySQL における or、in、union、インデックス最適化の詳細な分析
この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...
mysql5.7.19 zip 詳細なインストールプロセスと構成
MySQL v5.7.19 正式版（32/64 ビットインストール版および zip 解凍版） 1. ...
Nginx プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法
序文ゲートウェイプロジェクトを開発する場合、署名 sign_key 情報はリクエスト時にリクエスト ...
CSS3 における擬似クラスの一般的な使用法の詳細な説明
before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した...
Linux でバックグラウンド タスクを実行するために nohup と screen を使用する例と違いの簡単な分析
SSH ターミナル (putty、xshell など) を使用して Linux サーバーに接続し、時...
UTF-8 ファイルの Unicode 署名 BOM (バイト オーダー マーク) の問題
最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...
Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明
実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...
Dockerパッケージイメージの実装と構成の変更
最近、Docker の学習や実際の運用で多くの問題に遭遇したので、それを記録するためにブログを書きま...
フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する
コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...
Vueはタブルーティング切り替えコンポーネントのメソッド例を実装します
序文この記事では、vue に付属している vue-router.js ルーティングを使用してページン...