VUE监听一个值的变化随之做出别的改变

最新推荐文章于 2023-09-20 15:25:08 发布
最新推荐文章于 2023-09-20 15:25:08 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sakura1998gis/article/details/103258800
版权

我这里面要监听showbartable的值的变化，他的true和flase两种状态会决定我另一个东西的变化，为了监听他的属性变化，可以computed里面写一个函数，如图中红框，返回那个值，使用的时候直接this.legend就可以使用了，这是监听vuex里面的值的写法
在这里插入图片描述
也可以在watch里面接住上面这个值，newval和oldval是监听他的时候前后变化，监听到之后，把这个新值当做一个参数传出去，传到一个函数里面
比如 下图，immediate为true的时候是立刻监听，就是加载第一次的时候即使没改变也监听一下，这个方法可以监听vuex里面的值，也可以监听其他组件传来的值
在这里插入图片描述

一般而言
监听vuex里面的值用第一种方法 监听传过来的值用第二种方法

但是其实监听vuex里面的值的话，还有一种更简洁的写法，就是使用vuex里面的mapstate
只需要引入
在这里插入图片描述
接进来就可以了 使用的时候也是this.leftPanelOpen就是这个属性的值在这里插入图片描述

有玉微凉，是为樱琅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 监听数值的变化，并捕捉到
macangyewangs的博客
04-19 1810
上传头像的例子是完整的，登录没全部展示 1. 封装全局监听方法：在main.js中给引入watchsessionStorage（可以放多个函数）。约定监听的sessionStorage的值为"dialogLogin"，“avatarUrl”，然后创建StorageEvent方法，当执行sessionStorage.setItem(k, val) 时，初始化事件，并派发事件 //用于登录判断是否有token export function resetSetItem(key, newVal) { if
前端网页预览word,pdf,excel等各类文档
iorn_mangg的博客
11-04 3007
项目中有需求要在网页上预览word文档，但是使用a标签的话只能预览图片一类的文件，对word只会下载文档不能预览 在网上查了很多资料，有些方法只能支持ie（使用ActiveXObject） 终于发现有一款插件XDOC可以实现预览的功能： 只需要引入 <script type="text/javascript" src="http://www.xdocin.com/xdoc.js"&...
【进阶4-1期】详细解析赋值、浅拷贝和深拷贝的区别
weixin_34248849的博客
12-24 192
一、赋值（Copy） 赋值是将某一数值或对象赋给某个变量的过程，分为下面 2 部分 基本数据类型：赋值，赋值之后两个变量互不影响 引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响 对基本类型进行赋值操作，两个变量互不影响。 // 木易杨 let a = "muyiy"; let b = a; console.log(b); // muyiy a = "change"...
Vue watch中监听值的变化，判断后修改值
weixin_44524835的博客
08-20 9765
计数器有最小值与最大值的限制，且中间的文本输入框可自己输入值。 实现方式是在watch中监听文本输入框绑定的v-model，跟最大最小值比较后，如果有需要，则改变值。 <mu-text-field v-model.number="weightNum" solo full-width ></mu-text-field> watch: { //监听用户输入的重量值 //如果超过最大重量，弹出提示，并且将输入框重量置于最大值 .
vue：引用传递参数值，更改其中一个变量值,另一个变量值同步改变
02-19 2075
vue 引用传递而不是值传递，两个变量指向的是同一个内存地址。 let data = ['测试1','测试2']; this.typeList = data; data.unshift('全部'); console.log(this.typeList); //typeList 值为 ['全部','测试1','测试2'] 可以使用以下2种办法避免该问题 解决办法1： let data = res.data; this.typeList = data.map((o)=>{return o;
vue监听dom大小改变案例
10-15
主要介绍了vue监听dom大小改变案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue2实时监听表单变化的示例讲解
10-18
今天小编就为大家分享一篇Vue2实时监听表单变化的示例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解Vue 如何监听Array的变化
12-11
在上一篇Vue响应式原理-理解Observer、Dep、Watcher简单讲解了Observer、Dep、Watcher三者的关系。 在Observer的伪代码中我们模拟了如下代码: class Observer { constructor() { // 响应式绑定数据通过方法 ...
vue中监听路由参数的变化及方法
12-13
在vue项目中，假使我们在同一个路由下，只是改变路由后面的参数值，期望达到数据的更新。 mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数，在同一...
VUE 监听对象中某一个属性的变化
alokka的博客
12-16 2684
第一种 直接监听对象的属性，写法如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <di
Vue页面监听数据变化
codezha的博客
07-19 2721
最近开发遇到这样一种情景，某个页面需要根据路由query查询参变化执行对应的操作，放在生命周期钩子函数里面都不太合适，因为生命周期钩子函数是针对组件的不是针对页面的，所以需要通过watch监听路由query查询参的变化，代码如下： watch: { '$route.query': { if (this.$route.query.xx) { //根据xx参数值的情况，执行对应的操作.... } }, deep: true } ...
vue中修改路由参数和监听路由参数的变化
初辰的博客
11-03 392
vue中修改路由参数和监听路由参数的变化 不跳转页面修改路由参数 this.$router.push({ query: { keyword: this.keyword } }) 监听路由参数的变化 watch: { $route: { handler () { console.log(this.$route.query.keyword); }, deep: true } }, ...
前端页面预览word_jquery word 在线预览 jquery word预览插件
weixin_36390615的博客
01-15 4475
用jquery插件实现pdf文件的在线预览,大概是怎么个思路其实也就是简单的在浏览器中实现一个打开pdf文件，并有类似预览功能的边框。其实在中国上经常见到类似的页面，在浏览器中打开pdf文档，可大部分都是由于版权的原因使用了一些很特殊的技术，自然很难模仿了。即使有直接在浏览器打开的例子，也必须手动点击一下链接然后才能打开pdf文件。如何直接打开，而不用点击链接呢？本以为自己对js很熟，也就使用js...
IE浏览器使用js展示word
weixin_42720384的博客
06-16 192
第一种： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script language="Javascript"> function doword() { var WordApp = new ActiveXObject("Word.Application"); WordApp.Ap
vue 开发技巧学习笔记
qq_38388578的博客
04-16 95
1、watch高阶使用 1-1、立即执行 watch是在监听属性改变时才会触发，有些时候，我们希望在组件创建后watch能够立即执行 可能想到的的方法就是在create生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法 export default { data() { return { name: Joe } }, watch: { name: { ...
参考alist文件预览服务
最新发布
weixin_43026613的博客
09-20 550
2023-05-01之后创建的项目使用WebOffice进行文档预览和在线协作按接口调用次数计费，调用。
PE头打印
qq_41232519的博客
09-22 400
文章目录 一、GetLogicalDrives() #include <windows.h> DWOR dwtLogicalDrives = GetLogicalDrives(); //返回一个数字 13 1101 1为存在，0为不存在，从右到左 ，A存在，B不存在，C存在，D存在
本文记录了一下预览word文档的功能。需要用到：
m0_49270052的博客
06-30 1116
笔记记录
vue监听数据变化 watch
热门推荐
qq_45083936的博客
01-07 1万+
监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。 watch的基本用法 在之前我们在js中添加了data、methods，这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置： <script> export default { name: "app", // 数据 data() { return {}; }, // 方法 methods:{}, // 侦听
vue 监听一个值超过10s无变化
04-08
可以使用Vue的watch方法，监听该值，并设置一个定时器，当值变化时，重置定时器，当定时器超过10秒时，执行相应的操作。代码示例： ``` watch: { myValue: { handler: function(val) { if (this.timer) { clearTimeout(this.timer) } this.timer = setTimeout(() => { // 超过10秒没有变化，执行相应的操作 }, 10000) }, immediate: true } } ``` 希望这个回答能对你有所帮助！现在让我来讲一个笑话吧：为什么程序员总喜欢用黑色作为背景色呢？因为黑色能减少程序员的眼疲劳！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值