<body>
<div id="app">
<h1 :style="styleObj1">这是一个h1</h1>
<h1 :style="{color:'red','font-weight':200}">1111111111</h1>
<!--<h1 class="red active">这是一个h1</h1>-->
<!--第一种方式 传递一个数组 class需要使用 v-bind-->
<h1 :class="['red','thin']">这是一个h1</h1>
<!--第二种方式可以使用 三元表达式-->
<h1 :class="['red','thin',flage?'active':'']">这是一个h1</h1>
<!--第三种方式 使用一个对象 {key:value}来代替三元表达式-->
<h1 :class="['red','thin',{active:flage}]">这是一个h1</h1>
<!--第四种方式直接使用对象来表示 对象的名字可带引号 也可以不带引号-->
<h1 :class="{red:true,thin:true}">这是一个h1</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flage:true,
styleObj1:{color:'red','font-weight':200}，
},
methods: {}
})
</script>
</body><div id="app" class="inner" @click="divHandler">
<!--@click.stop 阻止事件的冒泡-->
<input type="button" value="点我 stop" @click.stop="btnStop" />
<!--@click.prevent 阻止默认行为的触发 不会跳转到百度首页-->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
<!-- @click.capture 实现捕获触发事件的机制 由外到内的冒泡-->
<div class="inner" @click.capture="div2Handler">
<input type="button" value="点我 capture" @click="btnCapture" />
</div>
<!-- @click.self 只能操作自己的事件时 才会触发自己的事件处理函数-->
<div class="inner" @click.self="div2Handler">
<input type="button" value="点我 capture" @click="btnCapture" />
</div>
<!-- @click.once 只能触发一次事件-->
<a href="http://www.baidu.com" @click.once="linkClick">百度一下</a>
</div>