<!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. python学习笔记(3)--函数、参数、变量、递归

    1.函数基本语法和特性 背景摘要 现在老板让你写一个监控程序,监控服务器的系统状况,当cpu\memory\disk等指标的使用量超过阀值时即发邮件报警,你掏出了所有的知识量吗,写出了以下代码 whi ...

  2. JavaScript最常见的错误种类

    1.报错为: Uncaught ReferenceError:未捕获引用错误(引用错误:使用了没有定义的变量) 错误之前的代码会执行,之后代码不会执行 2.报错为: Uncaught Syntaxer ...

  3. Java Selenium (十二) 操作弹出窗口 & 智能等待页面加载完成 & 处理 Iframe 中的元素

    一.操作弹出窗口   原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles(); 来获取到所有弹出浏览器的句柄, 然 ...

  4. MQTT服务器（Win）

    系统环境准备 Java JDK >=1.6,系统环境变量配置JAVA HOME 链接:https://pan.baidu.com/s/1OO-KCdsCrdfjMtf6BVNl6Q 提取码:dy ...

  5. Kibana 管理界面使用教程

    使用浏览器访问 ip:5601 默认端口,进入首页 Discover:日志管理视图 Visualize:统计视图 Dashboard:仪表视图 Timelion:时间轴视图 APM:性能管理视图 De ...

  6. MyBatis源码下载安装教程

    一.下载(原文链接:http://www.studyshare.cn/software/details/1177/1 github下载:去下载 百度网盘下载:去下载 提取码:d1er 二.安装 1.检 ...

  7. C# - AutoMapper之不同类型的转换

    一.Dto & Model约定 class TestDto { public string Name { get; set; } public int Age { get; set; } pu ...

  8. 2019 Multi-University Training Contest 1

    2019 Multi-University Training Contest 1 A. Blank upsolved by F0_0H 题意 给序列染色,使得 \([l_i,r_i]\) 区间内恰出现 ...

  9. CodeForces 980 C Posterized

    Posterized 题意:将[0,255] 分成 若干段, 每一段的长度最多为k, 每一个数只能被放进一个段里, 然后每一段的数组都可以被这一段最小的数字表示, 求最小的字典序. 题解:每次一个访问 ...

  10. 调用arcpy包批量进行矢量掩膜提取

    使用一个polygon矢量提取某个文件夹中所有的tif格式栅格数据 (要确保先安装好arcpy包) import arcpy arcpy.CheckOutExtension("spatial ...