[TOC] # v-model v-model指令，我理解為綁定數據源。就是把數據綁定在特定的表單元素上，可以很容易的實現雙向數據綁定 我們來看一個最簡單的雙向數據綁定代碼： html文件： ~~~ <div id="app"> <p>原始文本信息：{{message}}</p> <h3>文本框</h3> <p>v-model:<input type="text" v-model="message"></p> </div> ~~~ js ~~~ var app=new Vue({ el:'#app', data:{ message:'hello Vue!' } }) ~~~ 也可以在頁面上 ~~~ {{message | json}} ~~~ 就是把數據按照json的格式打印出來 ## 修飾符 ~~~ .lazy：取代 imput 監聽 change 事件,鼠標離開時才改變,懶惰的意思 .number：輸入字符串轉為數字 .trim：輸入去掉首尾空格 ~~~ ~~~ v-model:<input type="text" v-model="message"> <br> v-model-lazy:<input type="text" v-model.lazy="message"> <br> v-model-number:<input type="text" v-model.number="message"> <br> v-model-trim:<input type="text" v-model.trim="message"> ~~~ ## 文本區域加入數據綁定 ~~~ <textarea cols="30" rows="10" v-model="message"></textarea> ~~~ ## 多選按鈕綁定一個值 ~~~ <h3>多選按鈕綁定一個值</h3> <input type="checkbox" id="isTrue" v-model="isTrue"> <label for='isTrue'>{{isTrue}}</label> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { isTrue: true, } }) </script> ~~~ ## 多選綁定一個數組 ~~~ <h3>多選綁定一個數組</h3> <div id="app"> <input type="checkbox" id="x1" value="x" v-model="web_name"> <label for="x1">x</label> <input type="checkbox" id="y1" value="y" v-model="web_name"> <label for="y1">y</label> <input type="checkbox" id="z1" value="z" v-model="web_name"> <label for="z1">z</label> <p> {{web_name}} </p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { isTrue: true, web_name: [], } }) </script> ~~~ ## 單選按鈕綁定數據 ~~~ <h3>單選按鈕綁定</h3> <div id="app"> <input type="radio" id="one" value="男" v-model="sex"> <label for="one">男</label> <input type="radio" id="two" value="女" v-model="sex"> <label for="one">女</label> <p>{{sex}}</p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { sex: '女', } }) </script> ~~~