vue computed监听多个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ myMsg }}</p>
<button @click="clickHandler">修改</button>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
msg: "alex",
age: 18,
}
},
//在methods属性 和 computed属性 里声明的所有的方法里面的this指的都是vue, 里面不要用箭头 ***********
//箭头函数 只用在定时器和ajax里面
methods: { //里面的每一个方法要挂载到 vm上
clickHandler() {//单体函数中的this就是当前对象vm
console.log(this);
this.msg = "wusir"; // 当msg的数据属性 发生改变,下面的watch就会立马监听**
this.age = 20;
}, clickHandler2: function () {//这个里面的this也是当前对象vm
console.log(this) //在声明的函数内部 this指的是当前对象vue
}, //箭头函数 只用在定时器和ajax里面
clickHandler3: () => {//但是箭头函数中的this是当前对象的父类window method里面不要用箭头
console.log(this)//在声明的函数内部 this指的是当前对象vm的父类 window
},
},
computed: { //对应的是一个对象 里面放key-value 计算属性默认只有getter方法 监听的是msg和age
myMsg: function () { //声明一个方法
//写业务逻辑 return `我的名字叫${this.msg},年龄是${this.age}`;
}
}
})
</script>
</body>
</html>
vue computed监听多个属性的更多相关文章
- vue(七)--监听属性（watch）
1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...
- 9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
- 设计模式(5): vue 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
- vue--》如何使用wacth监听对象的属性变化？
在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现 监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...
- vue时时监听input输入框中 输入内容 写法
Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...
- 监听WPF依赖属性
原文:监听WPF依赖属性 当我们使用依赖属性的时候,有时需要监听它的变化,这在写自定义控件的时候十分有用, 下面介绍一种简单的方法. 如下使用DependencyPropertyDescripto ...
- Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- 详解Vue 如何监听Array的变化
详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm
- vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 终端开发补充 : 读 curses模块官方文档...
curses是一个提供终端屏幕打印和键盘处理的库, 我个人的理解就是终端里的gui(当然它是基于文本的)... 写2048的时候用到了这个库, 所以现在过来好好研究一下这个库... 下面是文档内容 : ...
- 通通玩blend美工（8）——动态绘制路径动画，画出个萌妹子~
原文:通通玩blend美工(8)--动态绘制路径动画,画出个萌妹子~ 2年前我在玩Flex的时候就一直有一个疑问,就是如何来实现一个蚊香慢慢烧完的Loading动画呢? 刚经历了某甲方高强度一个月的洗 ...
- 调用API函数减少c#内存占用（20+m减至1m以下)
原文:调用API函数减少c#内存占用(20+m减至1m以下) c#虽然内置垃圾回收机制,但是并不能解决程序占用内存庞大的问题,如果我们仔细观察任务管理器,我们会发现一个程序如果最小化的时候,它所占用的 ...
- 人像美妆---妆容迁移算法研究(Makeup transfer)
原文:人像美妆---妆容迁移算法研究(Makeup transfer) 对于人像美妆算法,现在的美妆相机.玩美彩妆之类的app已经做的比较成熟了,但是具体算法,基本网络上是杳无可查,今天本人介绍一种自 ...
- 搭建svn服务器&服务器客户端使用笔记
参考借鉴文章:http://www.cnblogs.com/vijayfly/p/5711962.html 之前尝试着用git管理公司代码,但被一个问题困惑了很久无法解决,那就是git该如何只pull ...
- Android零基础入门第59节：AnalogClock、DigitalClock和TextClock时钟组件
原文:Android零基础入门第59节:AnalogClock.DigitalClock和TextClock时钟组件 在前面一期,我们学习了DatePicker和TimePicker,在实际开发中其不 ...
- SQL Server Update:使用 TOP 限制更新的数据
原文 使用 TOP 限制更新的数据 可以使用 TOP 子句来限制 UPDATE 语句中修改的行数.当 TOP (n) 子句与 UPDATE 一起使用时,将针对随机选择的 n 行执行删除操作.例如,假设 ...
- spring.net的简单使用（二）资源配置
主要对资源配置做进一步的解析. 对资源位置的配置是在spring节点的context下,resource节点配置. spring.net的资源是可以设置在三种不同的位置的, 1.配置文件中 <r ...
- GNU自动化工具使用全过程详解，以及在线手册
[root@localhost test3]# cat add.h#ifndef _ADD_H_#define _ADD_H_ extern int add(int, int); #endif [ro ...
- 值得推荐的C/C++框架和库（深度好文）
[本文系外部转贴,原文地址:http://www.cppblog.com/merlinfang/archive/2014/12/26/209311.html http://coolshell.info ...