<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <div id="example-1"> <button v-on:click="counter+=1">数值：{{ counter }}</button><br/> <button v-on:click="green('victor',$event)">执行函数</button> <button v-on:dblclick="green('victor',$event)">执行函数</button> </div> {{message}} <div class="test" v-bind:class="{active:isActive,green:isGreen}" style="200px;height:200px,text-align:center;line-height:200px;">hi vue</div> <div v-bind:class="['active','test']">HI VUE1</div> <div :style="{color:color,fontSize:size}">HI VUE2</div> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> <h1 v-show="ok">Hello!</h1> <ul id="example-1"> <li v-for="item in items" v-bind:key="item.id"> {{ item.message }} </li> </ul> <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script type="text/javascript"> var data = { counter:0, message: 'Hello Vue!', isActive: true, isGreen: true, color: 'green', size: '50px', type: 'B', ok: true, items: [{ message: 'Foo' }, { message: 'Bar' } ], object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } var app = new Vue({ el: '#app', data: data, methods:{ green:function(str,e){ console.log(e); alert('hi '+str); alert(this.type); } }, }) </script> <style> .test { font-size: 30px; } .active { background: #FF0000; } </style> </body> </html>