[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> ~~~