Vue指令修饰符,v-bind对样式控制的增强,computed计算属性,watch监视器详解
更新时间：2025年06月17日 09:01:36 作者：Gen邓艮艮
这篇文章主要介绍了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){
业务逻辑
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现固定位置显示功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了.html页面引入vue并使用公共组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了使用vue-cli3打包dist路径问题修改打包配置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
函数式组件就是没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法,它只是一个接受一些 prop 的函数,下面这篇文章主要给大家介绍了关于Vue3封装全局函数式组件方法的相关资料,需要的朋友可以参考下2023-06-06
本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-09-09
这篇文章主要介绍了webpack中的optimization配置详解,主要就是根据不同的策略来分割打包出来的bundle,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了如何使用vue+epubjs实现电子书阅读器的基本功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
vue3+vite assets动态引入图片的三种方法及解决打包后图片路径错误不显示的问题
这篇文章主要介绍了vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
vue2实现directive自定义指令的封装与全局注册流程
自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,下面这篇文章主要给大家介绍了关于vue2实现directive自定义指令的封装与全局注册流程的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue axios同步请求解决方案,需要的朋友可以参考下2017-09-09
最新评论