Vue的方法和属性案例详解

 更新时间:2021年07月29日 10:07:50   作者:stay_少年与梦  
这篇文章主要介绍了Vue的方法和属性案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

vue的方法和属性

1.方法 methods

用法1

methods:{
方法名:function(){},
}

用法2

methods:{
方法名(){}
}

注意

{{}}调用要写()

示例

{{aa()}}

事件触发

@click=aa"可以有()也可以没有如果需要传参,加上()
把$event这个特殊参数传进去可以获取事件对象

2.计算属性

计算属性是什么

computed

计算属性的特点

  1. 计算属性有缓存
  2. 计算属性是基于他们的依赖进行缓存的
  3. 计算属性只有在他的相关依赖发生改变时才会重新求值当
  4. 计算属性所依赖的属性发生变化时他会重新计算一次

计算属性中的方法

set(da)
get()

示例

 	computed:{
                 //计算属性
                 //计算属性有缓存
                 //直接{{}}调用不用写()
                 //当计算属性所依赖的属性发生变化时他会重新计算一次

                 bb(){
                    return this.arr.filter(a=>a.indexOf(this.search) > -1)
                 },
                 cc:{
                     //调用计算属性时自动触发get方法,修改计算属性时自动触发set方法
                     set(a){
                        console.log('我是set'+"接收的内容"+a+"接收的内容")
                     },
                     get(){
                        console.log('我是get')
                        return this.arr.filter(a=>a.indexOf(this.search) > -1)

                     }
                 }
            },

到此这篇关于Vue的方法和属性案例详解的文章就介绍到这了,更多相关Vue的方法和属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3项目搭建的详细过程记录

    Vue3项目搭建的详细过程记录

    使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目脚手架,下面这篇文章主要给大家介绍了关于Vue3项目搭建的详细过程,需要的朋友可以参考下
    2022-10-10
  • 在Vue 中使用Typescript的示例代码

    在Vue 中使用Typescript的示例代码

    这篇文章主要介绍了在Vue 中使用Typescript的示例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 手把手教你拿捏vue cale()计算函数使用

    手把手教你拿捏vue cale()计算函数使用

    这篇文章手把手教你拿捏vue cale()计算函数使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue2.0实现前端星星评分功能组件实例代码

    vue2.0实现前端星星评分功能组件实例代码

    本文通过实例代码给大家介绍了vue2.0实现前端星星评分功能组件,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-02-02
  • vue组件文档(.md)中如何自动导入示例(.vue)详解

    vue组件文档(.md)中如何自动导入示例(.vue)详解

    这篇文章主要给大家介绍了关于vue组件文档(.md)中如何自动导入示例(.vue)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • Vue入门之数据绑定(小结)

    Vue入门之数据绑定(小结)

    本篇文章主要介绍了探索Vue高阶组件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue3中Element Plus Table(表格)点击获取对应id方式

    Vue3中Element Plus Table(表格)点击获取对应id方式

    这篇文章主要介绍了Vue3中Element Plus Table(表格)点击获取对应id方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue前端实现验证码登录功能

    vue前端实现验证码登录功能

    这篇文章主要介绍了vue前端实现验证码登录功能,登录时图形验证通过三种方法结合实例代码给大家讲解的非常详细, 通过实例代码介绍了vue登录时图形验证码功能的实现,感兴趣的朋友一起看看吧
    2023-12-12
  • el-select自定义指令实现触底加载分页请求options数据(完整代码和接口可直接用)

    el-select自定义指令实现触底加载分页请求options数据(完整代码和接口可直接用)

    某些情况下,下拉框需要做触底加载,发请求,获取option的数据,下面给大家分享el-select自定义指令实现触底加载分页请求options数据(附上完整代码和接口可直接用),感兴趣的朋友参考下吧
    2024-02-02
  • 浅谈Vue.js 1.x 和 2.x 实例的生命周期

    浅谈Vue.js 1.x 和 2.x 实例的生命周期

    下面小编就为大家带来一篇浅谈Vue.js 1.x 和 2.x 实例的生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论