<!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 {
width: 100px; height: 100px; background: green; border:1px solid black;}.text-danger { background: red;}.base { width: 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>