<body>

    <div id="root">

        {{fullName()}}

        {{age}}

    </div>

    <script>

        var vm = new Vue({

            el: "#root",

            data:{

                firstName:"Yu",

                lastName:"Lee",

                age:21,

            },

            //方法一：计算属性

            computed:{

                fullName:function () {

                    console.log("计算了一次");

                    return this.firstName +" "+this.lastName;

                }

            },

           //方法二：方法(无缓存)

            methods:{

                fullName:function () {

                    console.log("计算了一次");

                    return this.firstName +" "+this.lastName;

                }

            },

           //方法三：监听

           watch:{

               firstName:function () {

                   console.log("计算了一次");

                   return this.firstName +" "+this.lastName;

               },

               lastName:function () {

                   console.log("计算了一次");

                   return this.firstName +" "+this.lastName;

               }

           }

        })

    </script>

</body>

监听与计算属性均有缓存机制，所谓缓存机制就是"不依赖的属性发生改变时，不会重新计算一次“

Vue基础练习之计算属性、方法、监听器的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. VUE 学习笔记 四 计算属性和监听器

    1.计算属性 对于任何复杂逻辑,你都应当使用计算属性 <div id="example"> <p>Original message: "{{ me ...

  3. Vue基础进阶 之 计算属性的使用

    计算属性的基本使用 初始小示例: 代码: window.onload = () =>{ new Vue({ el:'div', data:{ msg:'' } }) } </script& ...

  4. vue.js初探：计算属性和methods

    在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...

  5. Vue学习笔记之计算属性和侦听器

    0x00 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split(''). ...

  6. 二、vue基础--计算属性和监听器

    1.一些操作需要计算后才能得到的用计算属性,需要放在computed属性中代码如下: <div id='app'> <div> <label>宽:</labe ...

  7. Vue.js-05：第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  8. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. Vue生命周期，计算属性、方法、侦听器

    vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...

随机推荐

  1. PHP学习(语言结构语句）

    switch case语句 for循环语句: foreach循环语句 常用于遍历数组,一般有两种使用方式:不取下标.取下标. (1)只取值,不取下标 <?php foreach (数组 as 值 ...

  2. CSS user-select文本是否可复制

    1. 概述 1.1 说明 在项目过程中,有时候需要网页中内容信息不可被复制进行保护数据信息,故可使用css属性user-select进行控制用户能否选中文本. 1.2 语法 user-select : ...

  3. oracle审计的格式

    audit table; audit table by xxx(username); audit table by xxx(username) whenever not successful; 系统表 ...

  4. oracle触发器——ddl触发器

    什么是ddl(data definition language),说白了就是我们经常用的create.alter和drop这些数据定义语句. n  创建ddl触发器 请编写一个触发器,可以记录某个用户 ...

  5. [转]GDB调试基础

    一.gdb常用命令: 命令 描述 backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号 选择栈帧 info(或 ...

  6. JavaScript--关于变量提升思考

    下面例子仅仅是思考变量提升使用: 在实际开发中并不推荐使用相同名字的变量和函数! // 如果变量和函数同名的话,函数优先提升 console.log(a); function a() { consol ...

  7. 通过反射 修改访问和修改属性的值 Day25

    package com.sxt.field; /* * 通过反射拿到属性值 * 修改public属性值 * 修改private属性值 * 缺点:可读性差:代码复杂 * 优点:灵活:可以访问修改priv ...

  8. Gym - 101962K _ Rei do Cangaço

    题意:给予n个房间,每个房间可以的到x个金币(x可能为负数),可以进行两种操作: 右移3i个房间,并且打开除最后一个的所有房间,如在1号房间,第一次移动可以移动到4号,并且打开1,2,3三个房间. 只 ...

  9. phpexcel使用说明5----ThinkPHP+PHPExcel[导入][导出]实现方法

    转自:http://www.thinkphp.cn/code/403.html实现步骤: 注意:phpexcel必须是1.78版本的,不能用1.8以上的 一:去官网http://phpexcel.co ...

  10. 巨蟒python全栈开发-第11阶段 ansible_project2

    一个NB的网站: https://www.toolfk.com/ CDN:将用户的需求送到最近的节点:内容分发网络 有些是专门做CDN的工具 常用的markdown是需要知道的,短信有字数限制. we ...