<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue--样式绑定 事件处理</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<style>
.active {
100px;
height: 100px;
background: green;
border:1px solid black;
}
.text-danger {
background: red;
}
.base {
100px;
height: 100px;
}
</style>
<body>
<div id="app">
<!--事件绑定-->
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
<!--样式绑定-->
<div v-bind:class="{active:isActive,'text-danger': hasError}"></div>
<div v-bind:class="classsObject"></div>
<!--使用对象-->
<div v-bind:class="classObject"></div>
<!--数组语法-->
<div v-bind:class="[activeClass, errorClass]"></div>
<!--三元表达式来切换列表中的 class ：-->
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
<!-- v-bind:style 直接设置样式：-->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
<!--使用对象-->
<div v-bind:style="styleObject">菜鸟教程</div>
<!--数组语法-->
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>
<div id="greet">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
</div>
</body>
<script>
var app = new Vue({
el: '#greet',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
say: function (message) {
alert(message)
},
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
console.log(event)
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
<script>
new Vue({
el:'#app',
data:{
counter:0,
activeColor:'green',
fontSize:30,
isActive:true,
hasError:true,
activeClass: 'active',
errorClass: 'text-danger',
name: 'Vue.js',
error: {
value: true,
type: 'fatal'
},
classsObject:{
active:true,
'text-danger':true
},
styleObject:{
color:'red',
fontSize:'30px'
},
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
},
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,
'text-danger': this.error.value && this.error.type === 'fatal',
}
}
}
})
</script>
</html>