<div id='root'>
  姓:<input v-model='firstName'/>
  名:<input v-model='secondName'/>
  <div>{{fullName}}</div>
  <div>{{count}}</div>
</div>
<script>
  new Vue({
    el:'#root',
    data:{
      firstName:'',
      secondName:'',
      count: 0
    },
    computed:{
      fullName:function(){
        return this.firstName + this.secondName
      }
    },
    watch: {
      firstName:function(){
        this.count ++;
      },
      secondName:function(){
        this.count ++
      }
    }
  })
</script>
计算属性:computed,一个属性是通过其他属性计算而来,这有一个好处,就是firstName和secondName没有变化的时候,fullName会使用上一次的缓存值,不会重新计算

侦听器:watch,去监听某一个数值的变化,一旦这个监听的数值发生了变化,就在侦听器里面处理业务逻辑

vuejs计算属性和侦听器的更多相关文章

  1. VueJs(7)---计算属性和侦听器

    计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...

  2. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  3. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  4. Vue-比较方法、计算属性和侦听器

    分别用方法.计算属性和侦听器实现当fristName和lastName改变时,fullName跟着改变. 一.方法: html: <div id="app"> {{fu ...

  5. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  6. Vue学习之vue中的计算属性和侦听器

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

  7. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  8. Vue.js 生命周期、计算属性及侦听器

    一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...

  9. vue基础——计算属性和侦听器

    计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...

随机推荐

  1. [poj 1276] Cash Machine 多重背包及优化

    Description A Bank plans to install a machine for cash withdrawal. The machine is able to deliver ap ...

  2. SQL——模糊查询

    前言 在这个大数据时代,我们都离不开对数据的增删改查,增加.删除.修改这些看似都是一步完成的事情,但是对于查询来说,好的查询SQL可以大大的减少系统内存运行时间,提高系统的反应速度.这里简单的介绍一下 ...

  3. 788B(dfs+xjb)

    题目链接: http://codeforces.com/problemset/problem/788/B 题意: 给出一个有 n 个顶点和 m 条边的图(没有重边,可能有自环), 可以从中任意一个顶点 ...

  4. Spring-【高阶】注解-转载

    从Spring2.0以后的版本中,Spring也引入了基于注解(Annotation)方式的配置,注解(Annotation)是JDK1.5中引入的一个新特性,用于简化Bean的配置,某些场合可以取代 ...

  5. Java基础笔记(十一)—— 字符串与数组

    字符串的声明与初始化主要两种:String s1=new String("abc");      或      String s2="abc"; String ...

  6. Scrapy框架中的Pipeline组件

    简介 在下图中可以看到items.py与pipeline.py,其中items是用来定义抓取内容的实体:pipeline则是用来处理抓取的item的管道 Item管道的主要责任是负责处理有蜘蛛从网页中 ...

  7. 手动添加git 到 右键菜单

    1.通过在“运行”中输入‘regedit’,打开注册表. 2.找到[HKEY_CLASSES_ROOT\Directory\Background]. 3.在[Background]下如果没有[shel ...

  8. Poj 2096 (dp求期望 入门)

    / dp求期望的题. 题意:一个软件有s个子系统,会产生n种bug. 某人一天发现一个bug,这个bug属于某种bug,发生在某个子系统中. 求找到所有的n种bug,且每个子系统都找到bug,这样所要 ...

  9. springBoot使用外部Tomcat启动项目

    实现思路是: 将springBoot项目自带的tomcat在部署的时候不使用. 方法一:将springBoot自带tomcat编辑成只在编译和测试时使用. 转载出处:https://www.edurt ...

  10. 在startup中遍历程序集

    在aspnetcore中是可以使用AppDomain的,如:在ConfigureServices中,可以使用以下代码获取项目引用的所有dll, var assemblies = AppDomain.C ...