<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. HELLO---MVC

    前言 很荣幸有机会参加BS的项目,这个图书馆系统这个项目,需要用到ITOO框架,其中涉及到好多小框架的学习,MVC就是其中的一个学习知识点,像大家一样,刚刚接触一个新鲜的知识,心里除了恐惧还有就是茫然 ...

  2. OC 中的 weak 属性是怎么实现的?

    OC 中的 weak 属性是怎么实现的,为什么在对象释放后会自动变成 nil?本文对这个问题进行了一点探讨.环境 mac OS Sierra 10.12.4 objc709参考答案 搜索后发现runt ...

  3. linux中使用wget模拟爬虫抓取网页

    如何在linux上或者是mac上简单使用爬虫或者是网页下载工具呢,常规的我们肯定是要去下载一个软件下来使用啦,可怜的这两个系统总是找不到相应的工具,这时wget出来帮助你啦!!!wget本身是拿来下载 ...

  4. [Cqoi2014]危桥 (两遍网络流)

    题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; inline int read() { , ...

  5. 非递归遍历二叉树Java版的实现代码(没写层次遍历)

    直接上代码呵呵,里面有注解 package www.com.leetcode.specificProblem; import java.util.ArrayList; import java.util ...

  6. Python 类总结

    Python可以继承多个父类,多重继承. 类支持多个对象的产生,命名空间的继承,运算符重载1).类产生多个实例对象Python OOP模型中的两种对象:类对象和实例对象.类对象提供默认的行为,是实例对 ...

  7. IDEA使用汇总

    1. 常用配置 File --> Settings (Ctrl + Alt + S) 1).提示不区分大小写: Editor-->Genereal-->Code Completion ...

  8. CentOS-7.5 解决ifconfig报错

    1.报错信息:-bash: ifconfig: command not found   2.检查IP地址是否设置正常 ip addr 以上说明ip设置正常,如果没有获取到IP地址则设置一个即可,设置i ...

  9. 排序算法对比,步骤,改进,java代码实现

    前言 发现是时候总结一番算法,基本类型的增删改查的性能对比,集合的串并性能的特性,死记太傻了,所以还是写在代码里,NO BB,SHOW ME THE CODE! github地址:https://gi ...

  10. Mavlink消息包解析

    Byte Index 字节索引 Content 内容 Value 值 Explanation 说明 0 包起始标志 v1.0: 0xFE (v0.9: 0x55) 指示新消息帧的开始.在v1.0版本中 ...