今回は、vue.js で v-model 命令を使用して双方向のデータ バインディングを実現する方法を説明します。注意事項は何ですか?実際のケースを見てみましょう。 vue.js の主な機能は、データの双方向バインディングを実現することです。この記事では、フォーム処理中に双方向バインディングを実現するための v-model 命令の使用方法を紹介します。 v-model 命令は、 、、 で使用されます。これらのフォーム要素では、いわゆる双方向バインディングは、js の vue インスタンスのデータが、レンダリングされた dom 要素のコンテンツと一致することを意味します。使用する相手が変わっても、相手も同じデータに応じて更新されます。これは、<p style="text-align: left;">property<a href="http://www.php.cn/wiki/169.html" target="_blank">アクセサーを設定することで実現されます。例: </a></p>app.html<p style="text-align: left;"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> vuejs v-model 数据双向绑定 </title> <style type="text/css"> [v-cloak] { display: none } </style> </head> <body> <p id="app"> <form> 姓名： <input type="text" v-model="data.name" placeholder="姓名"/> <br /> 性别： <input type="radio" id="one" value="One" v-model="data.sex"/> <label for="man">男</label> <input type="radio" id="two" value="Two" v-model="data.sex"/> <label for="male">女</label> <br /> <input type="checkbox" id="jack" value="book" v-model="data.interest"/> <label for="jack">阅读</label> <input type="checkbox" id="john" value="swim" v-model="data.interest"/> <label for="john">游泳</label> <input type="checkbox" id="move" value="game" v-model="data.interest"/> <label for="move">游戏</label> <input type="checkbox" id="mike" value="song" v-model="data.interest"/> <label for="mike">唱歌</label> <br /> 身份： <select v-model="data.identity"> <option value="teacher" selected>教师</option> <option value="doctor">医生</option> <option value="lawyer">律师</option> </select> </form> <p><pre>data: {{$data | json 2}}</pre></p> </p> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script> <script type="text/javascript"> $(function() { new Vue({ el: '#app', data: { data:{ name:'', sex:'', interest:[], identity:'' } } }) }) </script> </html></pre><div class="contentsignin">ログイン後にコピー</div></div> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 <p></p>推奨読書: <p></p> <p>vue入力ボックスでファジークエリを実装する方法<a href="http://www.php.cn/js-tutorial-398739.html" target="_blank"></a><br></p> <p>nodejs Expressを使用して自己署名httpsサーバーを構成する方法<a href="http://www.php.cn/js-tutorial-398730.html" target="_blank"></a><br></p>
