},
linkClick() {
console.log('触发了连接的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件')
}
}
});
</script>
7、按键修饰符
v-on:keyup : 允许为 v-on 在监听键盘事件时添加按键修饰符
<input v-on:keyup.enter="submit">绑定一个回车按键时间
8、Vue.js 样式的绑定
1、Class属性的绑定（v-bind:class）
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>也可以：
<div id="app">
<div v-bind:class="active"></div>
</div>2、数组语法
即我们可以向v-bind:class 传递一个数组
<style>
.active {
width: 100px;
height: 100px;
background: green;
} .text-danger {
background: red;
}
</style>
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
同时在数组中我们也可以使用三元表达式：
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>3、Vue.js 的内联样式（v-bind:style）
1、直接设置样式
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">测试内联样式</div>
</div>2、绑定样式对象
<div id="app">
<div v-bind:style="styleObject">测试绑定样式对象</div>
</div> <script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px'
}
}
})
</script>
3、绑定多个样式对象
<div id="app">
<div v-bind:style="[baseStyles, overridingStyles]">绑定多个样式对象</div>
</div> <script>
