计算属性

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

计算属性具有依赖性，计算属性依赖 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. How to: Display a List of Non-Persistent Objects in a Popup Dialog 如何:在弹出对话框中显示非持久化对象列表

    This example demonstrates how to populate and display a list of objects that are not bound to the da ...

  2. 使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目

    1.安装.构建 # 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app my-app cd my-app ...

  3. Django 执行 makemigrations 显示 No changes detected in app

    在Django项目配置一下多数据库,但是运行 makemigrations 执行不正常 $ python manage.py makemigrations polls No changes detec ...

  4. 苹果_公司开发者账号_注册Apple ID

    本文所有网站入口为developer.apple.com 注册Apple ID 注意事项:目前注册信息尽量用拼音或英文,姓名格式正确,记住安全问题,出生日期在18岁以上(小于18岁会出现Sorry,y ...

  5. 一个MongoDB索引走偏的案例及探究分析

    接业务需求,有一个MongoDB的简单查询,太耗时了,执行了 70S 左右,严重影响用户的体验.. 查询代码主要如下: db.duoduologmodel.find({"Tags.SN&qu ...

  6. centos7 配置阿里镜像

    1. 备份原来的yum源 cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.设置aliyun的y ...

  7. mongodb基本安装

    这次搞搞NOSQL, 但最简单的MONGODB安装,还是要作点配置的. 一,安装网址: https://www.mongodb.com/download-center/community?jmp=na ...

  8. PDF软件

    推荐的PDF阅读软件:文电通

  9. MAC地址表（交换机）、ARP缓存表以及路由表（路由器）

  10. java之四种权限修饰符

    java权限修饰符piublic.protected.private.置于类的成员定义前,用来限定对象对该类成员的访问权限. 修饰符 类内部 同一个包 子类 任何地方 private yes     ...