sau交流学习社区—vue总结:使用vue的computed属性实现监控变量变化,使用vue的watch属性监控变量变化从而实现其他业务

有时候遇到这么个需求,输入框为空的时候,请求一遍接口,如果输入框不为空的时候,需要点击搜索按钮请求接口。

一、使用computed属性的实时监控计算

我第一反应是做一个computed属性监控这个输入框的值,一旦监控发现值为空,我就重新执行一遍请求的方法。

<el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
   <el-input v-model="searchContent" placeholder="请输入相关内容"></el-input>
</el-col>
<el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
    <el-button @click="search()" type="primary">搜索</el-button>
 </el-col>


 data () {
    return {
      searchContent: ‘‘
    }
  },
 
 computed: {
    searchContent: function () {
      if(!this.searchContent){
        this.getEventCategories();
      }
    }
  },
 

查找资料发现:1、计算属性也是属性,把他当做普通属性,所以你在computed中定义searchContent属性,在data中再次定义searchContent就会爆出重复定义的问题。

当我在data中不定义searchContent时候,

发现超出了浏览器栈最大的允许的大小,说明什么呢,就是说,你陷入了无限循环,栈溢出了,发现就是计算属性里有计算属性本身,循环计算这个属性。

这时候自己才想起来,2、computed属性就是一个普通属性,唯一区别不同的地方就是:computed属性里的function里的任何数据发生变化都会触发这个属性值的计算。

 

二、使用watch方法来实现检测值的变化并且需要调用其他方法

最后自己只能使用watch方法来实现这个功能

  watch: {
    "searchContent": function () {
      if(!this.searchContent){
        this.getEventCategories();
      }
    }
  },

这个时候在data里还是需要定义searchContent这个变量,意思就是说,检测searchContent的值变化,一旦发现这个值为空的时候就调用method的方法getEventCategories()。否则就不会调用这个方法。

最后上一张动态图

 

三、总结

1、computed属性的结果会被缓存,依赖的属性如果发生变化才会重新计算,把他当做普通属性来使用;

2、watch属性,主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以把他看作是computed和methods的结合体;

3、methods方法表示一个具体的操作,主要书写业务逻辑;

原文地址:https://www.cnblogs.com/chengxs/p/10040946.html

时间: 2024-11-05 19:04:52

sau交流学习社区—vue总结:使用vue的computed属性实现监控变量变化,使用vue的watch属性监控变量变化从而实现其他业务的相关文章

sau交流学习社区--songEagle开发系列:Vue.js + Koa.js项目中使用JWT认证

一.前言 JWT(JSON Web Token),是为了在网络环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519). JWT不是一个新鲜的东西,网上相关的介绍已经非常多了.不是很了解的可以在网上搜索一下相关信息. 同步sau交流学习社区:https://www.mwcxs.top/page/454.html 二.源码 Talk is cheap. Show me the code. 三.工作流程 JWT本质来说是一个token.在前后端进行HTTP连接时来进行相应的验证. 1. 

sau交流学习社区--看小说的lovebook一个无线端BS应用

一.前言 loveBook爱上阅读,是一款webapp的读小说等书籍的并且阅读的应用.如果觉得可以,欢迎fork和star. 自己最近在追斗破苍穹电视剧,下班时候在地铁上总听到有人说,斗破苍穹书籍比电视剧好看,于是想弄个看书的webapp, 这样在手机上看电子书很爽.找了好久发现发现只有追书神器的api暴露出来了,起点之类的api找不到. 同步:https://www.mwcxs.top/page/457 二.技术栈 vue2 + vuex + vue-router + webpack + ES

Vue面试中,经常会被问到的面试题/Vue知识点整理

看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题.(都是一些基础的vue面试题,大神不用浪费时间往下看) 一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数据模型转化成UI 展现出

Vue框架简介,实例成员,事件,过滤器,文本、事件和属性指令

目录 Vue框架简介,实例成员,事件,过滤器,文本.事件和属性指令 什么是Vue 为什么要学Vue 如何使用Vue Vue实例成员 1.el: 实例 2.data: 数据 3.methods: 方法 Vue事件 面向对象js Vue过滤器 Vue指令 文本指令 事件指令 属性指令 Vue框架简介,实例成员,事件,过滤器,文本.事件和属性指令 什么是Vue vue框架:渐进式JavaScript框架 ? vue一个环境:可以只控制页面中一个标签,可以控制一组标签,可以控制整个页面,可以控制整个项目

vue 中的watch 和 computed

watch : Watch属性可以监视 data 中指定数据的变化,一旦被监听的数据值发生了改变,就会立即触发watch对应的 function处理函数: <template> <div> <input type="text" v-model="firstname" /> + <input type="text" v-model="lastname" /> = <input

ExtJS学习-------Ext.define的别名和备用名,两种定义静态方法的方法,混入属性和其他属性

(1)Ext.define起别名和备用名 Ext.onReady(function(){ Ext.define('User',{ config:{ name:'张三', age:23 }, //使用别名 alias:'alias_user', //使用备用名 alternateClassName:'alternateClassName_user', constructor:function(config){//构造器 var me=this; me.initConfig(config); } }

原 Java学习之Xml系列二:xml按条件查询、xml递归遍历所有元素和属性

xml中加入了几条,为了方便查询时作为示例. 话不多说见代码注释: DTD文件:SwordTypeDefinition.dtd <?xml version="1.0" encoding="UTF-8"?> <!ELEMENT SwordLibrary (Sword*)> <!ELEMENT Sword (SwordName,Price,Attack)> <!ELEMENT SwordName (#PCDATA)> &l

免费IT学习社区

慕课网: 慕课网(IMOOC)-国内最大的IT技能学习平台 极客学院: http://www.jikexueyuan.com 麦子学院: 麦子学院 - 专业IT职业在线教育平台 FreeCodeCamp: https://www.freecodecamp.com/ FreeCodeCamp中文: Learn to Code and Help Nonprofits 汇智网: 汇智网 - 最前沿的在线互动编程学习平台 实验楼: 实验楼 - 国内领先的IT技术实训平台 伯乐在线: 伯乐在线 博学谷:

和初学者交流学习java语言一些体会。

对初学者,自己学习java语言的一些体会: 1.工欲善其事,必先利其器.先把Java学习工具准备好,包括集成开发环境IDE,自己觉得MyEclipse比较适合,还有数据库,Oracle或MySQL,SqlServer,自己觉得这三种比较主流,最好在电脑上都要安装.如果觉得会影响电脑运行速度,可以在电脑桌面设置三种数据库的启动和关闭的快捷方式,比如run.bat ,里面可以封装数据库启动的代码.需要使用哪个数据库,就启动哪个,不用的数据库,可以关闭.数据库启动图形界面也要安装好,便于操作数据库.