vue样式绑定与事件处理器的基本使用

Vue.js 样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示

我们也可以在对象中传入更多属性用来动态切换多个 class 。

我们也可以直接绑定数据里的一个对象：

我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式

new Vue({ el: '#app', data: { isActive: true, error: { value: true, type: 'fatal' } }, computed: { classObject: function () { return { base: true, active: this.isActive && !this.error.value, 'text-danger': this.error.value && this.error.type === 'fatal', } } } })

我们可以把一个数组传给 v-bind:class

我们还可以使用三元表达式来切换列表中的 class ：

errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类

我们可以在 v-bind:style 直接设置样式：

也可以直接绑定到一个样式对象，让模板更清晰

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

Vue.js 事件处理器

事件监听可以使用 v-on 指令：

v-on 可以接收一个定义的方法来调用。我们需要使用一个方法来调用 javaScript 方法。

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

.stop - 阻止冒泡

.prevent - 阻止默认事件

.capture - 阻止捕获

.self - 只监听触发该元素的事件

.once - 只触发一次

.left - 左键事件

.right - 右键事件

.middle - 中间滚轮事件

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

全部的按键别名：

.enter

.tab

.delete (捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

JavaScript Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。