vue中动态指令的用法和event事件 vue动态控制hover

html：

<div id="app">
		<!-- <p v-if="age>18">age大于18 - {{age}}</p>
		<p v-else-if="age<18 && age>16">age小于18 -{{age}}</p>
		<p v-else="age<15">age小于15 </p>
		<p v-if="flag ? age=30 : age=16">{{age}}</p> -->
		<button @click="age ++ ">按钮+ {{age}}</button>

		<!-- <p v-bind:class=" 'c' ">颜色</p> 这里的c相当于是一个字符串--> 
		<!-- <p v-bind:class="c">颜色</p> 这里的c相当于是一个变量，需要在js中指定一下 -->
		<!-- <p v-bind:class=" ['c','bor'] ">颜色+边框</p> 如果不想要引号，就需要去js中指定一下-->

		<!-- <div v-bind:class="{ 'bor' : flag }">边框</div> 后面是判断条件，当满足的时候，再加上bor这个类 -->
		<!-- <p v-bind:class="fun()">函数</p> 也可以写函数 -->

		<!-- style 判断条件与class相同-->
		<!-- <div v-bind:style="{color:'red',fontSize:'30px',marginTop:'30px'}"> style样式</div> 样式名是驼峰命名的，并且没有中横线 -->
		<!-- <div :style="sty">111</div> -->
		<!-- <div :style="[sty,sty2]">222</div> -->

		<!-- {{}} 浏览器闪烁问题 需要配置下v-cloak的css样式 -->	
		<h1 v-cloak>{{msg}}</h1>

		<a @click="action($event)">阻止事件冒泡</a>
		<a href="http://www.baidu.com" @click.prevent.stop="action2()">自带阻止默认行为 && 事件冒泡</a>
	</div>

css：

<style>
.c{ color: pink }
.bor{border:1px solid #ccc;}
[v-cloak]{ display: none; } /*必须配置css样式，否则不成效*/
</style>

js：

<script>
new Vue({
	el:'#app',
	data:{
		age:14,
		flag:true,
		c:'c',
		sty:{background:'red'},
		sty2:{color:'pink'},
		msg:'文本'
	},
	methods:{
		fun:function(){
			return 'c';
		},
		action:function(e){
			e.stopPropagation();
		}
	}
})
</script>