计算属性

计算属性用于处理复杂的业务逻辑

计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算

计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算

<!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>表单输入绑定</title>

</head>

<body>

  <div id="app">

    {{ reverseMsg }}---- {{ reverseMsg }}-------- {{ reverseMsg }} //直接使用计算属性中的函数就是所要的数据

  </div>

</body>

<script src="vue.js"></script> //vue的js，不然使用不了vue语法

<script>

  const app = new Vue({

    el: '#app',

    data: {

      msg: 'hello world'

    },

    computed: {

      reverseMsg () { // 计算属性是一个函数，返回一个值，使用和data中的选项一样

        console.log('computed') // 执行1次 --- 依赖性

        return this.msg.split('').reverse().join('');

      }

    }

  })

</script>

</html>

侦听属性(监听属性)

vue提供了检测数据变化的一个属性 watch 可以通过  newVal 获取变化之后的值

<!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>表单输入绑定</title>

</head>

<body>

  <div id="app">

   <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = {{ fullname }}

  </div>

</body>

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

<script>

  const app = new Vue({

    el: '#app',

    data: {

      firstname: '李',

      lastname: '小龙',

      fullname: '李小龙'

    },

    watch: { // 侦听属性

      firstname (newVal, oldVal) { // newVal变化之后的值

        this.fullname = newVal + this.lastname // 当改变 姓 的时候执行

      },

      lastname (newVal, oldVal) {

        this.fullname = this.firstname + newVal // 当改变 名字 的时候执行

      }

    }

  })

</script>

</html>

浅谈vue中的计算属性和侦听属性的更多相关文章

  1. 浅谈Vue中计算属性（computed）和方法（methods）的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  2. VUE 计算属性 vs 侦听属性

    计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...

  3. 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

    https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...

  4. vue计算属性VS侦听属性

    原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...

  5. 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽

    今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...

  6. Vue-计算属性和侦听属性

    复杂逻辑应使用计算属性而不应写在插值表达式{{ }}里 <div id="app"> 原值:{{ msg }} <br> 翻转后的值:{{ reverseM ...

  7. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  8. 浅谈Vue中的Prop

    Prop 基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message p ...

  9. 浅谈Vue中Slot以及slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...

随机推荐

  1. jquery 常用选择器基础语法学习

    siblings方法的常用应用场景:选中高亮 实现代码 <!DOCTYPE html> <html> <head> <meta charset="U ...

  2. 如何正确使用 Spring Cloud？【下】

    5. Spring Cloud 如何融合 DevOps? 接下来,我们来了解一下 Spring Cloud 在与 DevOps 融合方面可以做哪些事情,它是如何让应用持续交付更加快捷的?我们都知道,D ...

  3. socket互传对象以及IO流的顺序问题

    UserInfo.java package com.company.s6; import java.io.Serializable; public class UserInfo implements ...

  4. dpwwn: 1 Vulnhub Walkthrough

    主机层面扫描: ╰─ nmap -p1-65535 -sV -A 10.10.202.130 22/tcp   open  ssh     OpenSSH 7.4 (protocol 2.0) 80/ ...

  5. 一些webpack常见编译报错的解决方案

    重新安装依赖可以解决80%的webpack编译报错问题. rm -rf node_modules rm package-lock.json npm cache clear --force npm in ...

  6. linux中的交换分区（swap）及优化

    SWAP(交换内存) 1.什么是交换内存? 在硬盘上创建一块区域,当你的物理内存快要被用光的时候,内核临时的 物理内存上的文件数据交换到硬盘上的这段区域上面,当物理内存有闲置的时候 在把交换内存上的数 ...

  7. Git入门基础教程

    目录 一.Git的安装 1.1 图形化界面 1.2 命令行界面 二.本地仓库的创建与提交 2.1 图形化界面 2.1.1 首先在电脑上有一个空白目录 2.1.2 打开SourceTree 2.1.3 ...

  8. web攻击与防御技术-平台搭建与暴力破解

    平台搭建是首先安装xampp并把pikachu的压缩文件解压在HTdocs下 然后 点击后显示 安装成功 首先随便输入一些东西 然后用burpsuite抓包 对username和password字段进 ...

  9. 20191214 Codeforces Round #606 (Div. 2, based on Technocup 2020 Elimination Round 4)

    概述 切了 ABCE,Room83 第一 还行吧 A - Happy Birthday, Polycarp! 题解 显然这样的数不会很多. 于是可以通过构造法,直接求出 \([1,10^9]\) 内所 ...

  10. Qt 信号和槽异常： QObject::connect: No Such slot baseClassName::subClassfunction() in ......

    2019-08-14起笔 小熊的情况描述: 父类A继承自QWidget,所以父类A自动添加了Q_OBJECT.  子类B继承自父类A,子类B没有添加Q_OBJECT.在子类B中给动态创建的控件添加事件 ...