<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. css 实现三级联动菜单

    昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...

  2. python数据类型基本操作

    目录 1.字符串.... 1 2.列表[ ] 3 3.元组 ( ) 4 4.字典 { } 4 5.SET集合... 7 1.字符串 1.1查找字符串 find查找 >>> msg = ...

  3. jacoco-maven-plugin

    <properties> <org.eclipse.persistence.version>2.7.0</org.eclipse.persistence.version& ...

  4. 源码分析Thread

    多次start ?? IlleageStateException

  5. Linux重新挂载磁盘

    Linux下磁盘和目录的概念与WIN不同:比如,分了一个系统分区默认挂载了根(/)目录,根下还有其它目录,比如/user /lib等.如果系统分区不够用,可以再分出分支,把根下其它目录分别挂载出来,例 ...

  6. 013 Roman to Integer 罗马数字转整数

    给定一个罗马数字,将其转换成整数. 返回的结果要求在 1 到 3999 的范围内. 详见:https://leetcode.com/problems/roman-to-integer/descript ...

  7. ELK(ElasticSearch, Logstash, Kibana) v5.3.2 分布式日志收集分析最佳解决方案 基于CentOS 7 ( 一 )

    [root@localhost temp]# .tar.gz -C /usr/local/ [root@localhost temp]# vim logstatsh_test.conf ======= ...

  8. Java集合——集合框架Iterator接口

    1.集合输出 很多情况下我们需要把集合的内容进行输出,也就是遍历集合. 遍历集合的方式有以下几种: 1.Iterator 2.ListIterator 3.Enumeration(枚举方式,比较老一般 ...

  9. (转)linux磁盘分区fdisk分区和parted分区

    linux磁盘分区fdisk分区和parted分区 原文:http://www.cnblogs.com/jiu0821/p/5503660.html ~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  10. 牛客网Java刷题知识点之构造函数是什么、一般函数和构造函数什么区别呢、构造函数的重载、构造函数的内存图解

    不多说,直接上干货! 构造函数是什么? 构建创造对象时调用的函数. 构造函数是一种特殊的函数,用来在对象实例化时初始化对象的成员变量. 注意: 创建对象都必须要通过构造函数初始化. 构造函数的特点   ...