首页 > 其他分享 >vue 中 computed属性中的get与set;

vue 中 computed属性中的get与set;

时间:2023-03-02 15:47:12浏览次数:47  
标签:vue computed get 改变 set 组件 变量

1.computed是对⾃⼰定义的变量进⾏监控,这⾥的变量不是在data中定义,直接
在computed中定义,然后变量放到展⽰页⾯后就实现了数据的双向绑定,当变量发
⽣改变是就会触发计算,说到这就要说说第⼆点get和set ⽅法了,


2.computed中有get和set⽅法,(在默认的情况下只有get)


1.get⽅法是取,相当于我们可以在get中给这个计算属性中的变量赋值
2.set⽅法是改变时触发,这⾥的改变指的是当我们在computed中定义的变量的值发⽣改变是,会触发set⽅法,这样我们就可以在set⽅法中进
⾏⼀些我们想要做的事,(⽐如说调⽤某个⽅法 列:

this.$emit("input", newValue);
传值给父组件,

众所周知,props是父向子传值的一种形式。当我们子组件的props值要改变的时候,不能直接通过改变子组件的props来改变父组件(不然会报错)。

解决方式

使用computed方式 ,也就是最开始介绍的内容

computed: {
 count: {
   get() {
   return this.value;
   },
   set(newValue) {
   this.$emit("input", newValue);
   },
 },
},

 



set()可以监听 参数value 值的变化
————————————————
版权声明:本文为CSDN博主「朝朝朝朝ZZZ」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/YZ_ZZZ24/article/details/124828079

标签:vue,computed,get,改变,set,组件,变量
From: https://www.cnblogs.com/harryzong/p/17171982.html

相关文章

  • 使用setoolkit进行钓鱼网站的制作实训
    钓鱼网站的制作实训实训目的:通过实训掌握社会工程学工具包的使用方法。场景描述:社会工程学工具包(SET)是一个开源的、Python驱动的社会工程学渗透测试工具。这套工具包由......
  • react-native webView网页调试之setWebContentsDebuggingEnabled使用
    Android使用方法首先,我们需要在应用程序中调用WebView.setWebContentsDebuggingEnabled(true);文件位置:在MainActivity.java的onCreate方法内(在android/app/src/ma......
  • getClassLoader
    类加载器(classloader)用来加载Java类到Java虚拟机中。一般来说,Java虚拟机使用Java类的方式如下:Java源程序(.java文件)在经过Java编译器编译之后就被转换成Java......
  • vue3注册组件,以及组件之间通信
     注册组件 全局组件 局部组件 递归组件 组件通信 父传子父传递<template><divclass="container"><!--传递数据这里传了一个string和一......
  • 玩转GaussDB 中的SET操作符
    摘要:关系数据库中提供了一个关于集合的运算符SET操作符,其中包括以下操作:UNION/UNIONALL并集、INTERSECT交集、MINUS差集。本文分享自华为云社区《GaussDB中的SET操作......
  • why is the setInterval task executed slower than the setTimeout task in the brow
    whyisthesetIntervaltaskexecutedslowerthanthesetTimeouttaskinthebrowserjavascriptenvironment?为什么在浏览器javascript环境下setInterval任务......
  • 开心档之Vue教程1
    ​目录Vue.js样式绑定Vue.jsclassclass属性绑定实例1实例2实例3实例4数组语法实例5实例6Vue.jsstyle(内联样式)实例7实例8实例9Vue.js组件......
  • vue项目引用vue-pdf打包多出worker.js文件
    问题描述:项目要用到pdf预览功能,因为是vue项目就是直接导入了vue-pdf组件,但是在进行打包的时候在dist文件夹下面多个worker.js文件,导致项目部署后预览pdf直接报了404 方......
  • vue中input触发方法中调用ajax,导致input失去焦点问题
    发现在vue中监控input绑定的值,调用方法时,如果方法中有调用后端接口(使用Ajax),会导致input输入框失去焦点,这样导致的问题就是每输入一个字符,就要重新聚焦一次,可通过以下方式在......
  • vue 纵向滑动模块
    代码<template><div><!--左侧的滑动模块--><divclass="scroll-box":style="{width:410.7*screenWidth/1920+'px',height:730......