计算属性：computed  监听多个变量且变量是在vue实例中(依赖某个变量，变量发生改变就会触发)

侦听器：   watch        监听一个变量的变化

使用场景：watch(异步场景)   computed(数据联动)

demo:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>computed 和 watch</title>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

</head>

<body>

    <div id="app">

        watch：{{msg}}

        <div>computed：{{msg1}}</div>

    </div>

    <script>

        var app = new Vue({

            el:'#app',

            data:{

                msg:'message',

                other:'word'

            },

            watch:{

                msg(newVal,oldVal){

                    console.log('msg:' + newVal);

                    console.log('msg:' + oldVal);

                }

            },

            computed:{

                msg1(){

                    return this.msg  +'   ' + this.other

                }

            }

        });

        app.msg = 'Hello';

        app.other = '小红'

    </script>

</body>

</html>

【vue】computed 和 watch的更多相关文章

  1. vue computed 原理

    vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...

  2. Vue computed props pass params

    Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...

  3. vuex bug & vue computed setter

    vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...

  4. vue computed、methods、watch的区别

    1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...

  5. Vue computed属性

    computed vs methods 我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的. 在上例的基础上,我们把computed区块中的totalMarks函数整体移到 ...

  6. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  7. vue computed的执行问题

    1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process ...

  8. vue computed 可以使用getter和setter

    var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // ...

  9. Vue -computed传参数

    vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 <input v-model="newItem(key,val)" type="text& ...

  10. vue - computed

    computed 的作用主要是对原数据进行改造输出.改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……. 一.格式化输出结果: 我们先来做个读出价格的例子:我们读书的原始数据是price:1 ...

随机推荐

  1. 计数原理，递推，求从左边能看到l个棒子，右边能看到r个棒子的方案数目

    题意 有高为 1, 2, …, n 的 n 根杆子排成一排, 从左向右能看到 L 根, 从右向左能看到 R 根.求有多少种可能的排列方式.   solution: 数据范围仅200,本来是往组合数学方 ...

  2. 在windows系统搭建并运行一个Flutter项目

    搭建Flutter之前需要已经安装好相应的Flutter开发环境,如果没安装好相应环境的可以查看在windows系统搭建Flutter开发环境 搭建Flutter项目可以通过命令行搭建,或者通过and ...

  3. 提高组刷题班 DAY 1 上午

    低仿机器人(robo,1s,64M) 题解 大模拟 代码 #include <cstdio> #include <cstring> #include <iostream& ...

  4. 2.1 Go语言基础之运算符

    运算符用于在程序运行时执行数学或逻辑运算. 一.运算符 Go 语言内置的运算符有: 1. 算术运算符 2. 关系运算符 3. 逻辑运算符 4. 位运算符 5. 赋值运算符 1.1 算数运算符 运算符 ...

  5. 数据分析 - Excel 函数, 技巧, 分析工具

    数据分析工具使用场景 函数 分类 文本清洗函数 FIND - 查找 find 函数查询指定位置的某字符的的位置 快捷键 : 选中后双击右下角的 + 可以快速生成当前一列结果 FIND("查询 ...

  6. [GPU] Install H2O.ai

    一.前言 主页:https://www.h2o.ai/products/h2o4gpu/ GPU版本安装:h2oai/h2o4gpu 采用GPU,能否成为超越下面链接中实验的存在? [ML] LIBS ...

  7. c99数组稀疏初始化

    #include <stdio.h> #include <stdlib.h> int main() { ] = {[]=,,[] =}; ; i < ; i++) { p ...

  8. jenkins配置jdk、git、maven

    进入首页->系统管理->全局工具配置 配置jdk 查找jdk安装路径 如果是容器版jenkins,就登进容器里面查看jdk路径 [root@test2 ~]# echo $JAVA_HOM ...

  9. 后缀数组--summer-work之我连模板题都做不起

    这章要比上章的AC自动机要难理解. 这里首先要理解基数排序:基数排序与桶排序,计数排序[详解] 下面通过这个积累信心:五分钟搞懂后缀数组!后缀数组解析以及应用(附详解代码) 下面认真研读下这篇: [转 ...

  10. kubernetes安装dashboard步骤 【h】

    本篇文章参考kubernetes---dashboardv1.8.3版本安装详细步骤及 kubernetes-dashboard(1.8.3)部署与踩坑这两篇文章,详细写了自己部署过程中的操作.遇到的 ...