這次帶給大家怎樣使用vue.js中v-model指令實現資料雙向綁定，使用vue.js中v-model指令實現資料雙向綁定的注意事項有哪些，下面就是實戰案例，一起來看一下。 vue.js的一大功能就是實現資料的雙向綁定，本文就表單處理時運用v-model指令實現雙向綁定做一個介紹： v-model這個指令只能用在, ,這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的數據。這是透過設定<a href="http://www.php.cn/wiki/169.html" target="_blank">屬性</a>存取器來實現的。例如：</p> <p style="text-align: left;">app.html</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> <p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p> <p>推薦閱讀：</p> <p><a href="http://www.php.cn/js-tutorial-398739.html" target="_blank">如何實作vue input輸入框模糊查詢</a><br></p> <p><a href="http://www.php.cn/js-tutorial-398730.html" target="_blank">#怎麼使用nodejs express設定自簽名https伺服器</a><br></p>#
