<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>vue</title>

    <script src="vue.js"></script>

</head>

<body>

    <!-- vue中的计算属性和侦听器

        计算属性：

        computed:{}

        性能高，当依赖的数据没有发生变化时，不会重新加载

        侦听器：

        watch

     -->

    <div id="root">

        姓：<input v-model="firstname" />

        名：<input v-model="lastname" />

        <div>{{fullName}}</div>

        <div>{{count}}</div>

    </div>

    <script>

        new Vue({

            el:"#root",

            data:{

                firstname:'',

                lastname:'',

                count: 0

            },

            computed:{

                fullName: function() {

                    return this.firstname + ' ' + this.lastname

                }

            },

            watch: {

              firstname: function() {

                  this.count ++

              },

              lastname: function() {

                  this.count ++

              },

              fullName: function() {

                  this.count ++

              }

             }

        })

    </script>

</body>

</html>

Vue学习之vue中的计算属性和侦听器的更多相关文章

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

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

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

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

  3. vue计算属性和侦听器

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

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

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

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

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

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

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

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

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

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

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

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

    一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...

随机推荐

  1. var let及const

    es6已经发布很久了,之前只会用var定义变量,学习了let和const后,又学到了一些作用域.JavaScript编译和深拷贝浅拷贝的知识.这章主要来说说这三个定义量的方法: 1.var 在没学习e ...

  2. Linux安装配置Samba共享文件系统

    Samba共享文件系统搭建与配置: 1.Samba服务端:yum install samba samba-client cifs-utilscd /etc/samba/cp smb.conf smb. ...

  3. springboot+mybatis+druid+atomikos框架搭建及测试

    前言 因为最近公司项目升级,需要将外网数据库的信息导入到内网数据库内.于是找了一些springboot多数据源的文章来看,同时也亲自动手实践.可是过程中也踩了不少的坑,主要原因是我看的文章大部分都是s ...

  4. centos6.8启动防火墙的艰辛过程

    首先我的/etc/sysconfig/iptables文件没有. 解决办法: 1.任意运行一条iptables防火墙规则配置命令: iptables -P OUTPUT ACCEPT 2.对iptab ...

  5. INSERT: 批量插入结果集方式

    INSERT: 批量插入结果集 insert into table select x,y from A UNION select z,k from B ; insert into table sele ...

  6. 随笔编号-05 BigDecimal 处理集合

    1  创建一个BigDecimal 对象 BigDecimal Sum = new BigDecimal(0); 2  一个BigDecimal 对象,保留2位小数点 Sum.setScale(2,B ...

  7. centos7搭建hadoop3.*.*系列

    最近搭建这个hadoop踩过不少坑,先是配置JDK搞错路径(普通用户和root用户下的路径不同),再就是hadoop版本不同导致的启动错误,网上找到的是hadoop2.*.*的版本,但是我安装的had ...

  8. 前端架构师亲述：前端工程师成长之路的 N 问 及 回答

    问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度. 1. 前端开发 问题 大佬,能分享下学习路径么,感觉天天忙着开发业务,但是能力好像没有太大提升,不知道该怎么充实自己 ...

  9. Codeforces Round #480 (Div. 2) C - Posterized

    题目地址:http://codeforces.com/contest/980/problem/C 官方题解: 题解:一共256个像素网格,可以把这个256个分组,每个分组大小<=k.给出n个像素 ...

  10. POJ 3067 Japan (树状数组求逆序对）

    POJ - 3067 题意:有(1-n)个城市自上到下在左边, 另有(1-m)个城市自上到下在右边,共有m条高速公路,现求这m条直线的交点个数,交点不包括在城市处相交. 题解:先将高速公路读入,然后按 ...