<!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="width: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>
