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.js实现图片切换功能
这篇文章主要为大家详细介绍了Vue.js实现图片切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
详解Vue双向数据绑定原理解析
本篇文章主要介绍了详解Vue双向数据绑定原理解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue实现通过手机号发送短信验证码登录的示例代码
本文主要介绍了vue实现通过手机号发送短信验证码登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
vite2.x实现按需加载ant-design-vue@next组件的方法
这篇文章主要介绍了vite2.x实现按需加载ant-design-vue@next组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
vue form check 表单验证的实现代码
这篇文章主要介绍了vue form check 表单验证的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
详解Vue.js 响应接口
这篇文章主要介绍了Vue.js 响应接口的相关资料，文中实例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
Vue组件间传递数据的多种方法
在实际开发中,Vue组件之间的数据传递是最常见的需求,由于组件的作用域相互独立,如何在父子、兄弟和跨级组件间传递数据就显得尤为重要,本文将详细介绍多种Vue组件间传递数据的方,需要的朋友可以参考下
2025-03-03
vue.js实现开关(switch)组件实例代码
这篇文章介绍了vue.js实现开关(switch)组件的实例代码，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
解读vue项目防范XSS攻击问题
这篇文章主要介绍了解读vue项目防范XSS攻击问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
关于vue编译版本引入的问题的解决
这篇文章主要介绍了关于vue编译版本引入的问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09