计算属性

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

计算属性具有依赖性，计算属性依赖 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. C# FlagAttriute 的 小妙招

    FlagAttriute ,指示可将枚举视为位域(即一组标志). 官网中文解说:https://docs.microsoft.com/zh-cn/dotnet/api/system.flagsattr ...

  2. sleuth和zipkin微服务里的链路跟踪

    分布式链路跟踪介绍 对于一个微服务系统,大多数来自外部的请求都会经过数个服务的互相调用,得到返回的结果,一旦结果回复较慢或者返回了不可用,我们就需要确定是哪个微服务出了问题.于是就有了分布式系统调用跟 ...

  3. Dynamics 365 Customer Engagement导入解决方案时出错:Microsoft.Crm.CrmException: Plug-in assembly does not contain the required types or assembly content cannot be updated.

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  4. WebSessionStore: Could not obtain reference to HttpContext

    IBatis.net在多线程中报错“WebSessionStore: Could not obtain reference to HttpContext” 分析: 因为ibatis的ISqlMapSe ...

  5. TSC打印机防重码在线检测系统

    条码标签作为产品的一个身份标识,被应用得越来越普及,但随着使用量的增大,在打印条码流水号的过程中,偶尔会出现打印重复号码的标签出现,这样对产品生产及管理过程中会产生极大的混乱,会收到严重的客诉及返工, ...

  6. solo升级以及自动化更新的方法

    使用solo过程总涉及到更新问题,所以就在这里把solo更新的方法总结一下.希望能给小伙伴们一些帮助.如何选择更新方法主要是跟你的部署方式有关,如果你是通过 docker方式进行部署,那么你可以还可以 ...

  7. 团队项目之Scrum4

    小组:BLACK PANDA 时间:2019.11.24 每天举行站立式会议 提供当天站立式会议照片一张 2 昨天已完成的工作 2 基本实现web富文本编辑功能 后台的编辑接口已经基本完成,还有一些b ...

  8. MongoDB用户验证和权限管理

    官方参考页面: https://docs.mongodb.com/v3.6/tutorial/enable-authentication/ https://docs.mongodb.com/v3.6/ ...

  9. [转载]——Full UNDO Tablespace In 10gR2 and above (文档 ID 413732.1)

    最近遇到了这个案例,官方文档已有详尽的分析.介绍,特转载在此,方便以后查看! Full UNDO Tablespace In 10gR2 and above (SQL> select count ...

  10. 一次在CentOS系统单用户模式下使用passwd命令破密失败的案例

    某次遇到需要进入系统的单用户模式进行破密操作,结果却显示如下: 根据提示:Permission denied(缺少权限) 此时查看/usr/bin/passwd 权限: 正常情况下的权限应该是如下: ...