vue.js框架快速入门简明教程(四)：样式绑定和事件处理器

一．Vue.js 样式绑定

在vue.js模版语法中我们讨论过，vue.js用特殊指令v-bind将数据和HTML模版进行绑定。同样的class也是元素的属性，因此可以用v-bind来绑定样式类。

1、vue.js绑定class属性

绑定样式属性class有两种方式，对象语法绑定和属性绑定。

对象语法：

对象语法可以给 v-bind:class 设置一个对象，操作对象的从而动态的切换 class，对象的值将影响最终的class，vue.js称这种方式为对象语法；

例如：例子中classA是一个对象。

<div id="app">
    <div class="class1" :class="classA">vue.js绑定class属性</div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            classA:'class2'
        }
    })
</script>

如图：

如果你也想根据条件切换列表中的 class ，可以用三元表达式：

例如：

<div class="class1" :class="classA ? classB : classC ">vue.js绑定class属性--三元表达式</div>

数组绑定

另外，如果有多个class需要绑定，除了可以设置对象之外，我们可以把一个数组传给 v-bind:class，vue.js称这种方式为数组绑定。

例如：

<div class="class1" :class="[classA,classB]">vue.js绑定class属性</div>
<script>
    new Vue({
        el: '#app',
        data: {
            classA:'class2',
            classB:'class3'
        }
    })
</script>

如图：

2、Vue.js style(内联样式)

如果想直接在模版中设置样式，可以像HTML内联样式的方式那样设置，这样看起来十分直观。但其实内联样式中的每个属性值都是一个 JavaScript 对象。所以也存在上面两种方式。

对象语法

<div :style="{color:fontColor,fontSize:fontSize +'px'}">Vue.js style(内联样式)</div>
<script>
    new Vue({
        el: '#app',
        data: {
            fontColor:"green",
            fontSize:20
        }
    })
</script>

数组绑定

同理，可以把对象换成一个数组：

<div :style="styleObject">Vue.js style(内联样式)</div>
<script>
    new Vue({
        el: '#app',
        data: {
            styleObject:{
                color: 'green',
                fontSize: '20px',
            }
        }
    })
</script>

二．Vue.js 事件处理器

什么是事件处理器？其实就是用来监听事件方法函数的属性，正如javascript的onclick属性。在vue.js中v-on指令监听DOM事件，触发一些javascript代码。

例如：

<button @click="con+=1">点击了{{con}}次</button>
<script>
    new Vue({
        el: '#app',
        data: {
            con:0
        }
    })
</script>

在vue.js框架快速入门简明教程(四)：模版语法 中我们提到v-on 缩写用@表示。

例图：

但是在实际项目中，要处理的事件都是比较复杂的，如果还写在模版中，会显得很臃肿，程序很难维护，所以vue.js允许用v-on接收一个定义的方法来调用。

例如：

<button @click="myfun">点我有惊喜</button>
<script>
    new Vue({
        el: '#app',
        data: {
            myfun:function () {
                alert("有什么惊喜你告诉我...")
            }
        }
    })
</script>

当然也函数也可以带参：

<button @click="myfun('有什么惊喜')">点我有惊喜</button>
<script>
    new Vue({
        el: '#app',
        data: {
            myfun:function (message) {
                alert(message)
            }
        }
    })
</script>

1、事件修饰符

在vue.js中，methods只是处理数据逻辑的，而不是去处理DOM事件的细节，如果在事件处理中涉及到一些常用的DOM事件细节，比如 event.preventDefault（）方法阻止元素发生默认的行为 和 event.stopPropagation() 方法阻止事件冒泡到父元素，这些涉及到元素处理的方法。因此强大灵活的Vue.js 为 v-on 提供了事件修饰符。

事件修饰符是通过由点(.)表示的指令后缀来调用修饰符。

常用的一些修饰符有：

.stop

.prevent

.capture

.self

.once

用法：

<button @click.once="myfun('有什么惊喜')">只能点击一次</button>

2、按键修饰符

很多时候我们都是通过键盘操作事件，比如按下ENTER按键执行提交事件，除此之外还有ctrl，tab，delete，esc，left，right等，vue.js允许v-on 在监听键盘事件时添加按键修饰符

例如：

<button @click.ctrl="myfun">click+ctrl 同时点我有惊喜</button>

以上是vue.js中样式绑定和事件处理器的详细解析，结合文章中的例子带你更加深入学习和理解vue.js中样式绑定和事件处理器的原理。跟着教程边学边动手，会有不一样的收获哦。