<template>
<div id="app">


<h1>{{msg}}</h1>

<h1 v-text="msg"></h1>




<div v-bind:title="title">鼠标瞄上去看Title</div>

<img v-bind:src="src">
<img :src="src">

<div v-html="h"></div>


<div v-bind:class="{'red':flag}">我是一个div</div>

<div v-bind:class="{'red':flag,'blue':!flag}">我是第二个div</div>

<ul>
<li v-for="(item ,key) in list " :class="{'red':key==0,'blue':key==1}">{{key}}---{{item}}</li>
</ul>


<div class="box" v-bind:style="{width:boxwidth+'px'}">我是第三个div</div>
<router-view/>
</div>
</template>

<script>
export default {
name: 'App',
data (){
return{
msg:'你好',
src:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2476775726,1200843185&fm=27&gp=0.jpg',
title:'I am a Title!',
h:'<h1>HTML的绑定</h1>',
flag:false,
list:['111','222','333'],
boxwidth:500,
}
}
}
</script>

<style>

app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.red{
color:red;
}
.blue{
color:blue;
}
.box{
background: aqua;
width: 100px;
height: 100px;
}
</style>