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的方法和属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 计算属性和侦听器的使用小结

    vue 计算属性和侦听器的使用小结

    1. 计算属性和侦听器 1.1 计算属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"

  • Vue.js中的计算属性、监视属性与生命周期详解

    Vue.js中的计算属性、监视属性与生命周期详解

    前言 本章节咱们来说一下Vue中两个非常重要的计算属性.监视属性和生命周期,不废话直接上干货 计算属性 计算属性介绍 在模板中可以直接通过插值语法显示一些data中的数据,有些情况下我们需要对数据进行转化或者计算后显示,我们可以使用computed选项来计算,这时有些小伙伴可能就会问,我直接定义函数再调用不就行了,为什么还要整一个计算属性呢?这个问题在下边再做解释,我们先来看一下计算属性怎么用! 入门案例 需求 将人的姓和名拼接在一起 代码 <!DOCTYPE html> <html&g

  • Vue学习笔记之计算属性与侦听器用法

    本文实例讲述了Vue计算属性与侦听器用法.分享给大家供大家参考,具体如下: vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染.同时,还得益于计算属性的使用: 1.计算属性 像绑定普通属性一样在模板中绑定计算属性.例如reverseName属性依赖于firstName和lastName,当firstName或lastName发生改变时,依赖于它的 reverseName 也会更新. 利用函数方法也可以实现类似的效果,不同的是计

  • vue计算属性+vue中class与style绑定(推荐)

    vue计算属性+vue中class与style绑定(推荐)

    vue计算属性 在模板中放入大量的逻辑会让模板过重且难以维护 计算属性下所有函数可以放到computed中 class与style绑定 原始写法 v-bind:class 缩写 :class class绑定的三种形式 style的三种绑定形式 属性值为true显示,false不显示 第一种绑定方式: 第二种绑定方式: 第三种绑定方式: style修改 方式1: 方式2: 方式三: ps:下面通过代码介绍下计算属性 计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部

  • Vue computed 计算属性代码实例

    什么是计算属性??? 1.在computed中,可以定义一些属性,这些属性叫做[计算属性] 2.计算属性的本质是一个方法,不过一般是将他们的名称直接当做属性使用,不会当方法调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue-2.4.0.js"></scri

  • vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性,只有依赖的那个值发生改变,他才会重新计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

  • vue计算属性无法监听到数组内部变化的解决方案

    vue的计算属性 计算属性可以帮助我们简化代码,做到实时更新,不用再自己添加function去修改data. 首先看一下计算属性的基本写法(摘自官网) var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) 这样我们在模版里这样

  • 详解Vue之计算属性

    模板内的表达式通常用于简单的运算,当其过长或逻辑复复杂时,会变得难以维护 什么是计算属性 在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂时,就会变得臃肿甚至难以维护和阅读,比如 <div> {{text.split(',').reverse().join(',')}} </div>. 这里表达式包含三个操作,并不是很清晰,所以在遇到复杂的逻辑时应该使用计算属性,上例可以用计算属性进行改写: <div id="Calculat

  • Vue的方法和属性案例详解

    vue的方法和属性 1.方法 methods 用法1 methods:{ 方法名:function(){}, } 用法2 methods:{ 方法名(){} } 注意 {{}}调用要写() 示例 {{aa()}} 事件触发 @click=aa"可以有()也可以没有如果需要传参,加上() 把$event这个特殊参数传进去可以获取事件对象 2.计算属性 计算属性是什么 computed 计算属性的特点 计算属性有缓存 计算属性是基于他们的依赖进行缓存的 计算属性只有在他的相关依赖发生改变时才会重新求

  • Vue之vue.$set()方法源码案例详解

    在使用vue开发项目的过程中,经常会遇到这样的问题:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 这是因为新加入的属性不是响应式的,因此不会触发视图的更新,通常使用静态方法Vue.set()或者实例方法this.$set()解决 ,使用方式: 对象:this.$set(target,key,  value) 数组:this.$set(target,index,  value) 但不管是静态方法Vue.

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • vue之监听器的使用案例详解

    vue之监听器的使用案例详解

    第一种,用jquery的ajax发请求  用户注册时,判断用户名不能重复,可以用到监听器.监听器,用watch,需要监听哪个值的变化,就把这个值,放在watch里面.  拿到新值,调用接口,去请求后端,判断用户名是否已存在.  此时,遇到的问题,用户刷新页面的时候,并不会触发监听器,只是在username值发生变化的时候,才会触发监听器,改进方法:将方法格式的侦听器改成对象格式的侦听器. 优先推荐方法格式的监听器(最简单),如果刷新进来就需要执行一次,就定义成对象的监听器.  当一个对象有多个属

  • Java之Buffer属性案例详解

    Java之Buffer属性案例详解

    一.前言 熟悉NIO的人想必一定不会陌生buffer中position,limit,capacity这三个属性吧,之前在学习的时候遇到一个问题:就是当你先往缓冲区写入一部分数据,然后调用flip()方法,再全部读取完数据,然后再调用flip()方法,此时这三个值的变化是怎样的,研究了一下,决定写下来分享一下. 二.正文 1.介绍 position: 它指的是下一次读取或写入的位置. limit: 指定还有多少数据需要写出(在从缓冲区写入通道时),或者还有多少空间可以读入数据(在从通道读入缓冲区时

  • vue keepAlive缓存清除问题案例详解

    vue keepAlive缓存清除问题案例详解

    vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-alive v-if="xxx"> <router-view /> </keep-alive> <keep-alive v-else> <router-view /> </keep-alive> 网上很多都是这种方法,用了这种方

  • vue el-date-picker动态限制时间范围案例详解

    vue el-date-picker动态限制时间范围案例详解

    分为两种情况 1.开始时间和结束时间同一个框(限制只能本月) 2.开始时间和结束时间分开两个框(限制开始时间不能早于当前时间且结束时间不超过开始时间一星期)  情况1 //情况1 原创版权声明:本文为weixin_40998880原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. //本文链接:https://blog.csdn.net/weixin_40998880/article/details/106272897 //html <el-date-picke

  • CSS linear-gradient属性案例详解

    CSS linear-gradient属性案例详解

    目录 一.介绍 二.使用技巧 2.1 方格背景 2.2 棋盘效果 linear-gradient是css3的一个属性,功能强大,但是因为使用的灵活性,让没接触过的人感觉不好下手,下面来一起学习一下: 一.介绍 linear-gradient 是一种实现线性渐变的属性,顾名思义,它的特点的是控制渐变,特点是线性的进行控制. 属性介绍: linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+); 可以简化为: 1.

  • Vue.js之$emit用法案例详解

    Vue.js之$emit用法案例详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn:  例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&

  • vue实现父组件获取子组件的方法或属性值详解

    目录 父组件获取子组件方法或属性值 这里主要使用了vue的$ref 父组件获取子组件中的变量 案例一:点击父组件的按钮,操作子组件显示 案列二:获取子组件data中的变量 父组件获取子组件方法或属性值 vue的本质就是每一块只负责自己这一块的工作,这样更容易维护. 这里主要使用了vue的$ref 当用在一般的标签上时,主要功能是获取dom节点,进行一些dom的操作. 当使用在子组件上,可以用来获取子组件的属性. 那么下面我们要实现的就是如何在父组件上使用子组件的方法 目标:我需要实现一个在父组件

随机推荐