<!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监听多个属性的更多相关文章

  1. vue(七)--监听属性（watch）

    1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...

  2. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  3. 设计模式(5): vue 不监听绑定的变量

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

  4. vue--》如何使用wacth监听对象的属性变化？

    在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现     监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...

  5. vue时时监听input输入框中 输入内容 写法

    Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...

  6. 监听WPF依赖属性

    原文:监听WPF依赖属性 当我们使用依赖属性的时候,有时需要监听它的变化,这在写自定义控件的时候十分有用, 下面介绍一种简单的方法.   如下使用DependencyPropertyDescripto ...

  7. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  8. 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm

  9. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. LeapMotion Demo3

    原文:LeapMotion Demo3   从Github及其他论坛下载一些LeapMotion的例子,部分例子由于SDK的更新有一些小Bug, 已修复,感兴趣的可以下载:       http:// ...

  2. js 超链接点击

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  3. WPF自定义窗口最大化显示任务栏

    原文:WPF自定义窗口最大化显示任务栏 当我们要自定义WPF窗口样式时,通常是采用设计窗口的属性 WindowStyle="None" ,然后为窗口自定义放大,缩小,关闭按钮的样式 ...

  4. 【摘抄】C# DateTime.Now详解

    //2008年4月24日 System.DateTime.Now.ToString("D"); //2008-4-24 System.DateTime.Now.ToString(& ...

  5. C/C++网络编程时注意的问题小结

    1.网络编程在自己定义结构体实现协议的时候,一定要注意字节对齐这个问题.否则sizeof和强制转换指针的时候都会出现很难发现的bug. 什么是字节对齐自行百度. #pragma pack (1)//字 ...

  6. php 如何利用 soap调用.Net的WebService asmx文件

    原文:php 如何利用 soap调用.Net的WebService asmx文件 最近,帮一个同行测试用.net写的WebService接口,C#调用通过,现在需要测试一下php版本对它的调用,经过各 ...

  7. c#实现动态加载Dll

    原文:c#实现动态加载Dll 原理如下: 1.利用反射进行动态加载和调用. Assembly assembly=Assembly.LoadFrom(DllPath); //利用dll的路径加载,同时将 ...

  8. GzipStream的简单使用压缩和解压

    压缩和解压都需要用到三个流实例,分别是文件读取流.文件写入流.压缩流. 读取流和写入流有多种形式,压缩流就一种GzipStream. 不同的是对于压缩,是需要用文件写入流作为创建压缩流实例的参数, 压 ...

  9. ASP.NET Core Linux 发布

    这篇博客参考了以下文章: 1.http://www.cnblogs.com/ants/p/5732337.html 2.http://www.linuxidc.com/Linux/2016-11/13 ...

  10. 查看SharePoint文档库是，显示层次目录，可以点击返回层次

    在sharepoint 2013中,Documnet library(文档库)包含多层文件夹,当进入到文件夹后,返回指定层次了(例如返回上一层),需要用浏览器的返回. 使用起来不方便,而且浏览器的返回 ...