 <!DOCTYPE html><html lang="zh-CN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bind class专题 - vue2入门与提高视频教程 </title>
 
<script src="vue.js" type="text/javascript"></script>
 

</head>
<body  >


<div id="app">

   


<div v-bind:class="class1">test class</div>

<div v-bind:style="[{color:'red',fontSize:'12px'},{background:'blue'}]">test style</div>





firstname:
<input type="text" v-model="firstname" />
<br />
lastname:
<input type="text" v-model="lastname" />

<button v-on:click="clickme">click me</button>

<br />

fullname: {{ fullname }}

<br />

fullname2: {{ fullname2 }}



</div>


<script type="text/javascript">
  var vm = new Vue({
       el:'#app',
       data:{
        class1:[{aa:true,bb:true},{aa:true,bb:true}],
        firstname:'',
        lastname:'',
        fullname:''
       		 
       },
       methods:{

       		clickme:function(){

       			this.fullname = this.firstname + this.lastname

       			//alert(this.firstname + this.lastname);
       		}
       },
       computed:{
       		fullname2:function(){

       			return this.firstname + this.lastname
       		}

       }

})


</script>
</body>
</html>
 
 


