vue における v-model の役割

Vue.js では、v-model ディレクティブはフォーム入力要素とコンポーネント間のデータ バインディングに使用され、双方向のデータ同期を実現します。これは、フォーム データを管理し、インタラクションの実装を簡素化するための簡潔で便利な方法を提供します。その利点には、使いやすさ、双方向バインディング、さまざまな入力タイプのサポート、および修飾子によるカスタマイズ可能な動作が含まれます。この例では、<input> 要素はコンポーネント データ属性 form.username にバインドされ、テキスト入力中に双方向のデータ更新を実装します。

Vue における v-model の役割

Vue.js では、v-model は主にフォーム入力要素と Vue コンポーネント間のデータ バインディングに使用されます。これにより、フォーム データを管理するための簡潔で便利な方法が提供され、インタラクションの実装が簡素化されます。

v-model の仕組み

v-model がフォーム入力要素 (<input> や ## など) とともに使用される場合#<code>)、コンポーネント データとフォーム フィールド値の同期を保つ双方向のデータ バインディングを確立します。これは、ユーザーがフォーム フィールドを変更すると、コンポーネント データが自動的に更新されることを意味します。同様に、コンポーネント データが変更されると、それに応じてフォーム フィールドの値も更新されます。 </code></p> <p>v-model の利点<strong></strong></p> <ul> <li>使いやすい: <strong>v-model はデータをバインドする簡潔な方法を提供します。追加のコードを記述する必要がないため、開発プロセスが簡素化されます。 </strong> </li> <li>双方向バインディング: <strong>これにより、コンポーネントとフォーム フィールドの間でデータが両方向に流れることが可能になり、同期更新が保証されます。 </strong> </li> <li>さまざまな入力タイプのサポート: <strong>v-model は、テキスト入力、オプション、チェックボックス、ラジオ ボタンなど、一般的なフォーム入力タイプをすべてサポートします。 </strong> </li> <li> カスタム動作: <strong> </strong>.lazy<code> (遅延更新) や </code>number## などの修飾子を使用して、v-model の動作をカスタマイズできます。 # (入力を数値として解析します)。 <code></code> </li> </ul>v-model の使用例<p><strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="html"><input v-model="form.username" type="text"></code></pre><div class="contentsignin">ログイン後にコピー</div></div></strong>この例では、</p><input><p> 要素は # と同じです。 Vue コンポーネント内の ##form.username<code> データ属性バインディング。ユーザーが入力フィールドにテキストを入力すると、</code>form.username<code> の値が自動的に更新されます。同様に、</code>form.username<code> の値がコードを通じて変更されると、入力フィールドのテキストもそれに応じて更新されます。 </code><code></code>その他の注意事項</p> <p><strong></strong>v-model は、フォーム入力要素とカスタム Vue コンポーネントにのみ適用されます。 </p> <ul>カスタム コンポーネントの場合、v-model で使用するには、<li>model</li> の値とイベントの受信と発行を実装する必要があります。 <li><code>v-model を使用する場合、コンポーネント データ プロパティとフォーム フィールドの名前に同じ変数名を使用することが最善です。 </code></li> </ul><p>以上がvue における v-model の役割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>関連ラベル：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ja/search?word=vue" target="_blank">vue</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">ソース：php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/ja/faq/770692.html" title="vue における props の意味"> <span>前の記事：vue における props の意味</span> </a> <a href="http://www.php.cn/ja/faq/770694.html" title="jsはvueでも使えるのでしょうか？"> <span>次の記事：jsはvueでも使えるのでしょうか？</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">著者別の最新記事</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632892.html">ビットコインは 2025 年の 10 万ドルのマークを超えようとしていますか?</a> </div> <div>2024-10-17 11:08:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632876.html">所有しているビットコインを売却するにはどうすればよいですか? Eureka Exchange でビットコインを売却するための完全なチュートリアル</a> </div> <div>2024-10-17 11:01:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632574.html">通貨サークルが認める最も有用な取引所 2024 年に通貨サークルが認めるトップ 10 の取引所のリスト。</a> </div> <div>2024-10-17 08:37:31</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632573.html">SHIB コインの最も完全な歴史的価格の詳細、誕生以来の価格傾向の紹介</a> </div> <div>2024-10-17 08:34:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632572.html">世界の仮想通貨交換アプリトップ10（2024年最新ランキング）</a> </div> <div>2024-10-17 08:30:32</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632571.html">世界の仮想通貨取引プラットフォーム トップ 10 2024 年の世界の仮想通貨取引所 トップ 10</a> </div> <div>2024-10-17 08:27:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632568.html">2024 年の中国の高品質デジタル通貨取引プラットフォーム トップ 9、人気の仮想通貨取引所を調査</a> </div> <div>2024-10-17 08:23:31</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632567.html">2024 年に通貨業界が認めるトップ 10 の取引所は何ですか?通貨界が認めるトップ10取引所ランキング</a> </div> <div>2024-10-17 08:20:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632566.html">2024年に国内の仮想通貨取引所ベスト9とデジタル通貨取引プラットフォームベスト9を選出</a> </div> <div>2024-10-17 08:16:32</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ja/faq/1796632565.html">2024年国内最高の仮想通貨取引プラットフォーム。高品質な仮想通貨取引所の在庫</a> </div> <div>2024-10-17 08:13:01</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">最新の問題</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176366.html" target="_blank" title="テンプレートのメソッドで定義された変数の使用" class="wdcdcTitle">テンプレートのメソッドで定義された変数の使用</a> <a href="http://www.php.cn/ja/wenda/176366.html" class="wdcdcCons">Vue (v3 ではなく v2) を使用するのは初めてで、テンプレート内 (メソッド内で定義された) で変数を使用しようとしています。私の簡略化されたコード: <templa...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 18:10:25</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>513</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176336.html" target="_blank" title="ログインせずに Firebase を使用して Vue でユーザーを作成する" class="wdcdcTitle">ログインせずに Firebase を使用して Vue でユーザーを作成する</a> <a href="http://www.php.cn/ja/wenda/176336.html" class="wdcdcCons">ユーザープロフィールを作成するフォームを作成しました。しかし、ユーザーを作成するたびに問題が発生します。ログインおよびログアウトしたユーザー。この問題の解決にご協力ください。 co...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 14:20:12</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>514</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176322.html" target="_blank" title="Vue3 Webコンポーネントのプロダクションビルドの問題を解決する" class="wdcdcTitle">Vue3 Webコンポーネントのプロダクションビルドの問題を解決する</a> <a href="http://www.php.cn/ja/wenda/176322.html" class="wdcdcCons">vue2web コンポーネントを vue3 に移行しようとしていますが、運用用のビルドを作成するときに問題が発生します。 --targetwc を指定して vue-cli を使用し...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 12:43:37</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>473</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176315.html" target="_blank" title="vue vee-validate は日付ピッカーの選択の問題をキャプチャします" class="wdcdcTitle">vue vee-validate は日付ピッカーの選択の問題をキャプチャします</a> <a href="http://www.php.cn/ja/wenda/176315.html" class="wdcdcCons">datepicker フィールドの v-model バインディングが正しく機能しません。選択を行うと、画面上でライブ更新されますが、値は formValues リアクティブ オブジ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 11:38:56</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>510</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ja/wenda/176314.html" target="_blank" title="Vueでルートプロパティを設定する方法はありますか?" class="wdcdcTitle">Vueでルートプロパティを設定する方法はありますか?</a> <a href="http://www.php.cn/ja/wenda/176314.html" class="wdcdcCons">ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> から 2024-04-06 11:35:59</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>456</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>関連トピック</div> <a href="http://www.php.cn/ja/faq/zt" target="_blank">詳細> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/vuefzj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214322017503.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Vue の親コンポーネントが子コンポーネントのメソッドを呼び出す" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/vuefzj" class="title-a-spanl" title="Vue の親コンポーネントが子コンポーネントのメソッドを呼び出す"><span>Vue の親コンポーネントが子コンポーネントのメソッドを呼び出す</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/vuevif"><img src="https://img.php.cn/upload/subject/202407/22/2024072214321856034.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vue v-if" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/vuevif" class="title-a-spanl" title="vue v-if"><span>vue v-if</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/vueqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214321663953.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vue2.0と3.0の違い" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/vueqb" class="title-a-spanl" title="vue2.0と3.0の違い"><span>vue2.0と3.0の違い</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/vuezjcz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214321115425.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vueコンポーネントに値を渡す方法" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/vuezjcz" class="title-a-spanl" title="vueコンポーネントに値を渡す方法"><span>vueコンポーネントに値を渡す方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/vueshedqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214300227606.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vue3.0と2.0の違い" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/vueshedqb" class="title-a-spanl" title="vue3.0と2.0の違い"><span>vue3.0と2.0の違い</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/vuecyzl"><img src="https://img.php.cn/upload/subject/202407/22/2024072214262495693.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vue の共通命令" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/vuecyzl" class="title-a-spanl" title="vue の共通命令"><span>vue の共通命令</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/vuecyzlynx"><img src="https://img.php.cn/upload/subject/202407/22/2024072214194365070.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vue で一般的に使用される命令は何ですか?" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/vuecyzlynx" class="title-a-spanl" title="vue で一般的に使用される命令は何ですか?"><span>vue で一般的に使用される命令は何ですか?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ja/faq/mpvuehvueqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072213475148622.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="mpvue和vue区别" /> </a> <a target="_blank" href="http://www.php.cn/ja/faq/mpvuehvueqb" class="title-a-spanl" title="mpvue和vue区别"><span>mpvue和vue区别</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">人気のおすすめ</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="vue サブコンポーネントはどのように親コンポーネントのメソッドを呼び出すのでしょうか?" href="http://www.php.cn/ja/faq/483395.html">vue サブコンポーネントはどのように親コンポーネントのメソッドを呼び出すのでしょうか?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="vue親コンポーネントで子コンポーネントのメソッドを呼び出す方法" href="http://www.php.cn/ja/faq/483398.html">vue親コンポーネントで子コンポーネントのメソッドを呼び出す方法</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="vue3.0とvue2.0の違いは何ですか?" href="http://www.php.cn/ja/faq/464077.html">vue3.0とvue2.0の違いは何ですか?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title=".vueとは何ですか" href="http://www.php.cn/ja/faq/465747.html">.vueとは何ですか</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="vueサブコンポーネントから親コンポーネントに値を渡す方法" href="http://www.php.cn/ja/faq/480569.html">vueサブコンポーネントから親コンポーネントに値を渡す方法</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>人気のチュートリアル</div> <a target="_blank" href="http://www.php.cn/ja/course.html">詳細> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">関連するチュートリアル <div></div></div> <div class="tabdiv swiper-slide" data-id="two">人気のおすすめ<div></div></div> <div class="tabdiv swiper-slide" data-id="three">最新のコース<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/ja/course/1158.html" title="Vue.js開発の基本チュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6265067c6e11e273.png" alt="Vue.js開発の基本チュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Vue.js開発の基本チュートリアル" href="http://www.php.cn/ja/course/1158.html">Vue.js開発の基本チュートリアル</a> <div class="wzrthreerb"> <div>65616 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1158"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1172.html" title="vue+tp はリアルタイムの流行のダイナミック マップを分離して開発します" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be301380a22627.png" alt="vue+tp はリアルタイムの流行のダイナミック マップを分離して開発します"/> </a> <div class="wzrthree-right"> <a target="_blank" title="vue+tp はリアルタイムの流行のダイナミック マップを分離して開発します" href="http://www.php.cn/ja/course/1172.html">vue+tp はリアルタイムの流行のダイナミック マップを分離して開発します</a> <div class="wzrthreerb"> <div>9402 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1172"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1455.html" title="あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png" alt="あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]"/> </a> <div class="wzrthree-right"> <a target="_blank" title="あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]" href="http://www.php.cn/ja/course/1455.html">あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]</a> <div class="wzrthreerb"> <div>158756 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1455"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1219.html" title="Vue 3.0 新実践コース - シーズン 2" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/625e657f3bd5c128.jpg" alt="Vue 3.0 新実践コース - シーズン 2"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Vue 3.0 新実践コース - シーズン 2" href="http://www.php.cn/ja/course/1219.html">Vue 3.0 新実践コース - シーズン 2</a> <div class="wzrthreerb"> <div>63446 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1219"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1249.html" title="VuePress: Vue 静的 Web サイトを 30 分で作成" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611c49cb96f804.jpg" alt="VuePress: Vue 静的 Web サイトを 30 分で作成"/> </a> <div class="wzrthree-right"> <a target="_blank" title="VuePress: Vue 静的 Web サイトを 30 分で作成" href="http://www.php.cn/ja/course/1249.html">VuePress: Vue 静的 Web サイトを 30 分で作成</a> <div class="wzrthreerb"> <div>17065 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="1249"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/ja/course/812.html" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)" href="http://www.php.cn/ja/course/812.html">最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)</a> <div class="wzrthreerb"> <div >1415692 回の学習</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/286.html" title="JAVA 初心者向けビデオチュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初心者向けビデオチュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初心者向けビデオチュートリアル" href="http://www.php.cn/ja/course/286.html">JAVA 初心者向けビデオチュートリアル</a> <div class="wzrthreerb"> <div >2464041 回の学習</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/504.html" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル" href="http://www.php.cn/ja/course/504.html">Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル</a> <div class="wzrthreerb"> <div >502770 回の学習</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/901.html" title="Web フロントエンド開発の簡単な紹介" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web フロントエンド開発の簡単な紹介"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Web フロントエンド開発の簡単な紹介" href="http://www.php.cn/ja/course/901.html">Web フロントエンド開発の簡単な紹介</a> <div class="wzrthreerb"> <div >215188 回の学習</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/234.html" title="PSビデオチュートリアルをゼロからマスターする" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PSビデオチュートリアルをゼロからマスターする"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PSビデオチュートリアルをゼロからマスターする" href="http://www.php.cn/ja/course/234.html">PSビデオチュートリアルをゼロからマスターする</a> <div class="wzrthreerb"> <div >874331 回の学習</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/ja/course/1648.html" title="[Web フロントエンド] Node.js クイック スタート" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web フロントエンド] Node.js クイック スタート"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web フロントエンド] Node.js クイック スタート" href="http://www.php.cn/ja/course/1648.html">[Web フロントエンド] Node.js クイック スタート</a> <div class="wzrthreerb"> <div >6155 回の学習</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1647.html" title="海外のWeb開発フルスタックコースの完全なコレクション" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="海外のWeb開発フルスタックコースの完全なコレクション"/> </a> <div class="wzrthree-right"> <a target="_blank" title="海外のWeb開発フルスタックコースの完全なコレクション" href="http://www.php.cn/ja/course/1647.html">海外のWeb開発フルスタックコースの完全なコレクション</a> <div class="wzrthreerb"> <div >4705 回の学習</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1646.html" title="Go言語実践GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go言語実践GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go言語実践GraphQL" href="http://www.php.cn/ja/course/1646.html">Go言語実践GraphQL</a> <div class="wzrthreerb"> <div >4044 回の学習</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1645.html" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W ファンマスターが JavaScript をゼロから段階的に学習します"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W ファンマスターが JavaScript をゼロから段階的に学習します" href="http://www.php.cn/ja/course/1645.html">550W ファンマスターが JavaScript をゼロから段階的に学習します</a> <div class="wzrthreerb"> <div >604 回の学習</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ja/course/1644.html" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる" href="http://www.php.cn/ja/course/1644.html">Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる</a> <div class="wzrthreerb"> <div >20629 回の学習</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>最新のダウンロード</div> <a href="http://www.php.cn/ja/xiazai">詳細> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">ウェブエフェクト <div></div></div> <div class="swiper-slide" data-id="twof">公式サイト<div></div></div> <div class="swiper-slide" data-id="threef">サイト素材<div></div></div> <div class="swiper-slide" data-id="fourf">フロントエンドテンプレート<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery エンタープライズ メッセージ フォームの連絡先コード" href="http://www.php.cn/ja/xiazai/js/8071">[フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 オルゴール再生効果" href="http://www.php.cn/ja/xiazai/js/8070">[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果" href="http://www.php.cn/ja/xiazai/js/8069">[メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード" href="http://www.php.cn/ja/xiazai/js/8068">[フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS 模倣 Kugou 音楽プレーヤー コード" href="http://www.php.cn/ja/xiazai/js/8067">[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="古典的な HTML5 プッシュ ボックス ゲーム" href="http://www.php.cn/ja/xiazai/js/8066">[html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="画像効果を追加または削減するための jQuery スクロール" href="http://www.php.cn/ja/xiazai/js/8065">[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 個人アルバム カバー ホバー ズーム効果" href="http://www.php.cn/ja/xiazai/js/8064">[フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8328" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8327" title="フレッシュカラーの個人履歴書ガイドページテンプレート" target="_blank">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8326" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート" target="_blank">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8325" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート" target="_blank">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8324" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート" target="_blank">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8323" title="オンライン電子書籍ストア モールのウェブサイト テンプレート" target="_blank">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8322" title="IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します" target="_blank">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8321" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート" target="_blank">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3078" target="_blank" title="かわいい夏の要素のベクター素材 (EPS+PNG)">[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3077" target="_blank" title="4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)">[PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3076" target="_blank" title="歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）">[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3075" target="_blank" title="金色の卒業帽ベクター素材（EPS+PNG）">[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3074" target="_blank" title="黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)">[PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3073" target="_blank" title="異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）">[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3072" target="_blank" title="フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)">[バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/sucai/3071" target="_blank" title="9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）">[PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8328" target="_blank" title="室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8327" target="_blank" title="フレッシュカラーの個人履歴書ガイドページテンプレート">[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8326" target="_blank" title="デザイナーのクリエイティブな仕事の履歴書 Web テンプレート">[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8325" target="_blank" title="現代のエンジニアリング建設会社のウェブサイトのテンプレート">[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8324" target="_blank" title="教育サービス機関向けのレスポンシブ HTML5 テンプレート">[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8323" target="_blank" title="オンライン電子書籍ストア モールのウェブサイト テンプレート">[フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8322" target="_blank" title="IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します">[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ja/xiazai/code/8321" target="_blank" title="パープルスタイル外国為替取引サービスウェブサイトテンプレート">[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="http://www.php.cn/ja/about/xieyi.html" rel="nofollow" target="_blank" title="私たちについて" class="cBlack">私たちについて</a> <a href="http://www.php.cn/ja/about/yinsi.html" rel="nofollow" target="_blank" title="免責事項" class="cBlack">免責事項</a> <a href="http://www.php.cn/ja/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1730301857"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>