<div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}"></div> 这是在直接绑定行内样式style。然后通过绑定点击函数，为各个比那两赋值，达到点击更改div样式的目的。
<div v-bind:class="myClass"></div> 这个是直接绑定修改 class类名，在页内样式表中有我定义的 .aaa 和 .bbb 两个类名，通过动态修改class名修改样式，这也比 JQuery 直接操作dom节点快捷不少。
<img v-bind:src="mySrc"/> 这是直接绑定属性，动态修改 img 的src 属性。达到点击图像显示不同的图像的效果。
这里要特别强调一下，v-bind 直接绑定的是属性，而不是样式 ，对于 img ，他的src是属性，但是对于 div ，width 啥的是样式，不是属性，所以 v-bind:width="100+'px'" 不好使.
至于 v-bind 属性绑定，也就常用用法也就这么多了。
（3） v-model
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
下面我们看一段代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数据绑定篇</title> <style type="text/css"> .aaa{ margin: 10px; width: 100px; height: 100px; background-color: red; } .bbb{ margin: 10px; width: 50px; height: 50px; background-color: blue; } </style> </head> <body> <!-- 数据绑定篇 --> <div> <!--3. v-model--> <input type="text" v-model="myText" placeholder="请输入："/> <div >{{ myText }}</div><br /><br /> ------------------------------------------------------------------------------------- <!--绑定单选按钮--> <input type="radio" value="男" v-model="picked"> <label for="one">男</label> <br> <input type="radio" value="女" v-model="picked"> <label for="two">女</label> <br> <span>您选择了: {{ picked }}</span> <br><br> ------------------------------------------------------------------------------------- <!--绑定复选按钮--> <div> <input type="checkbox" value="好帅！" v-model="checkedNames"> <label for="jack">好帅！</label> <input type="checkbox" value="你是我的男神！" v-model="checkedNames"> <label for="john">你是我的男神！</label> <input type="checkbox" value="我爱你，飞哥！" v-model="checkedNames"> <label for="mike">我爱你，飞哥！</label> </div> <br> <span>您对飞哥的评价: {{ names }}</span><br><br> -------------------------------------------------------------------------- <!--绑定单选列表--><br> <select v-model="selected1"> <option>亲飞哥</option> <option>向飞哥表白</option> <option>请飞哥吃饭</option> </select><br> <span>真心话大冒险: {{ selected1 }}</span><br><br> ------------------------------------------------------------------------------ <div> <select v-model="selected2" multiple> <option>亲亲</option> <option>抱抱</option> <option>举高高</option> </select> </div><br> <span>你想和飞哥偷偷干些啥: {{ selected22 }}</span><br> </div> </body> <script type="text/javascript" src="https://www.jb51.net/js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/vue.js" ></script> <script type="text/javascript"> //通过Vue.js的构造函数 实例化出一个根实例 var app1= new Vue({ el:"#app1", data:{ myText:"", picked:"", selected1:"", //这是复选列表的变量，函数 selected2:[], selected22:"", funcselected22:function(){ this.selected22 = this.selected2.join(" "); }, //复选框的函数,及其相关变量 checkedNames:[], names:"", funcCheckedNames:function(){ this.names = this.checkedNames.join(" "); } </script> </html>
然后看一下效果：
然后解析一下这段代码。这里就不一一详细解释代码了，挑几个典型的详解，其他的便很简单了。
我们就以 多选按钮为例：