Vue指令修饰符、v-bind对样式控制的增强、computed计算属性、watch监视器
指令修饰符
-
所谓指令修饰符就是通过"."指明一些指令后缀，不同的后缀封装了不同的处理操作，可以简化代码
-
按键修饰符
- @keyup.enter：当点击enter键时触发
-
v-model修饰符
- v-model.trim：去除首尾空格
- v-model.number：转数字
-
事件修饰符
-
@事件名.stop：阻止冒泡
-
@事件名.prevent：阻止默认行为
-
@事件名.stop.prevent：可以连用，既阻止事件冒泡也阻止默认行为
-
v-bind对样式控制的增强
-
操作class
- 语法：:class = “对象/数组”
- 对象语法：:class = “{类名1:布尔值, 类名2:布尔值}”；使用场景：一个类名，来回切换
- 数组语法：:class = “[类名1, 类名2, 类名3]”；使用场景：批量添加或删除类
-
操作style
- 语法：:style = “{CSS属性名1:CSS属性值, CSS属性名2:CSS属性值}”
computed计算属性
-
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算
-
语法
-
声明在computed配置项中，一个计算属性对应一个函数
-
使用起来和普通属性一样使用{{计算属性名}}
computed: { 计算属性名 () { 计算逻辑 return 结果 } }
-
-
注意
- computed配置项和data配置项是同级的
- computed中的计算属性虽然是函数的写法，但他依然是个属性
- computed中的计算属性不能和data中的属性同名
- 使用computed中的计算属性和使用data中的属性是一样的用法
- computed中的计算属性内部的this依然指向的是Vue实例
watch监视器
-
作用：监视数据变化，执行一些业务逻辑或异步操作
-
语法
-
watch同样声明在跟data同级的配置项中
watch: { // 该方法会在数据变化时，触发执行 数据属性名(newValue, oldValue) { 业务逻辑 } 对象.属性名(newValue, oldValue) { 业务逻辑 } } -
完整写法
watch: { 数据属性名: { deep: true, // 深度监视（针对复杂类型） immediate: true, // 是否立刻执行一次handler handler (newValue){ 业务逻辑 } } }
-
本文地址：https://www.vps345.com/13700.html
上一篇：帝可得 - 策略管理
下一篇：帝可得 - 设备管理
