vue.js v-model資料雙向繫結例項
阿新 • • 發佈：2019-02-12
vue.js的一大功能便是實現資料的雙向繫結，本文就表單處理時運用v-model指令實現雙向繫結做一個介紹：
v-model這個指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向繫結，指的就是我們在js中的vue例項中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的資料。這是通過設定屬性訪問器實現的。例如：
app.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> vuejs 過濾器、ajax資料、巢狀迴圈、if判斷、事件監聽 </title> <style type="text/css"> [v-cloak] { display: none } </style> </head> <body> <div 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> </div> </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>
