Vue学习笔记(五) 样式绑定和事件处理

1、样式绑定

class 和 style 属性都可以控制元素的显示样式，我们可以使用 v-bind 指令对它们进行绑定

（1）绑定 class

• 对象语法

我们可以将一个对象传给 v-bind:class，它将根据传入对象的值动态切换 class

    
    
    



    

        
Error
    

    

• 数组语法

我们也可以将一个数组传给 v-bind:class，以便应用一个 class 列表

并且我们可以在数组中使用三元运算符作为条件判断

    
    
    



    

        
Error
    

    

（2）绑定 style

• 对象语法

我们可以直接将一个样式对象传给 v-bind:style，它将根据样式对象更新 style

    
    



    

        
你好，世界
    

    

• 数组语法

我们可以将多个样式对象绑定到同一个元素上

但是需要注意的是，对于相同的属性，后一个对象的值会覆盖前一个对象的值

    
    



    

        
你好，世界
    

    

2、事件处理

（1）事件处理

v-on 指令可以监听 DOM 事件，并对事件作出反应，我们可以给 v-on 传入一个 JavaScript 表达式

• 执行 JavaScript 代码

    
    



    

        
{{ counter }}
        
        增加 1
    

    

• 绑定 JavaScript 方法

    
    



    

        
        greet
    

    

• 调用 JavaScript 方法

    
    
    



    

        
        Say Hello To Alice
        


        Say Hello To Bob
    

    

（2）事件修饰符

事件修饰符用于处理 DOM 事件细节，通过由点表示的指令后缀调用修饰符，常见的事件修饰符包括：

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

（3）按键修饰符

按键修饰符用于监听键盘事件，同样是通过由点表示的指令后缀调用修饰符，常见的按键码的别名包括：

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

（4）系统修饰符

可以使用系统修饰符实现仅在按下相应按键时才触发鼠标或键盘事件的监听器，常见的系统修饰符包括：

• .ctrl
• .alt
• .shift
• .meta

【 阅读更多 Vue 系列文章，请看 Vue学习笔记 】

转载于:https://www.cnblogs.com/wsmrzx/p/11205252.html