<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .myPink{color:pink;} </style> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <hr> <h2>v-bind:绑定变量中的值给某属性</h2> <img v-bind:src="'img/'+imgUrl" alt=""> <hr> <a v-bind:href="myLink">百度</a> <hr> <h4 v-bind:style="{backgroundColor:myBGColor}">背景色</h4> <button @click="changeBGColor">改色</button> <hr> <p v-bind:class="{myPink:isPink}">改变字体颜色</p> <hr> <button v-bind:disabled="!isDisabled">按钮</button> </div> <script> new Vue({ el:"#container", data:{ msg:"Hello VueJs", imgUrl:"1.jpg", myLink:"http://www.baidu.com", myBGColor:"red", isPink:false, isDisabled:false }, methods:{ changeBGColor:function(){ this.myBGColor = "pink"; } } }) </script> </body> </html>