Vue002_计算属性和监视

计算属性和监视

计算属性

1) 在computed 属性对象中定义计算属性的方法
2) 在页面中使用{{方法名}}来显示计算的结果

监视属性

1) 通过通过vm 对象的$watch()或watch 配置来监视指定的属性
2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算

计算属性高级

1) 通过getter/setter 实现对属性数据的显示和监视
2) 计算属性存在缓存, 多次读取只执行一次getter 计算

代码展示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><!-- placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。 -->姓: <input type="text" placeholder="First Name" v-model="firstName"><br>名: <input type="text" placeholder="Last Name" v-model="lastName"><br>姓名1(单向): <input type="text" placeholder="Full Name" v-model="fullName"><br>姓名2(单向): <input type="text" placeholder="Full Name" v-model="fullName2"><br>姓名3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3"><br></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#demo',data: {firstName: 'George',lastName: 'Paul',fullName2: 'Paul George'},/*计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 */computed: {fullName: function() {return this.firstName + " " + this.lastName},fullName3: {get: function() {return this.firstName + " " + this.lastName},set: function(value){var names = value.split(" ")this.firstName = names[0]this.lastName = names[1]}}},watch: {lastName: function(newVal,oldVal){this.fullName2 = this.firstName + ' ' + newVal}}})vm.$watch('firstName',function(val){this.fullName2 = val + ' ' + this.lastName})</script></body>
</html>

页面展示

Vue002_计算属性和监视相关推荐

vue计算属性与监视属性
计算属性与监视属性计算属性在computed对象中定义计算属性的方法,在页面中使用{{方法名}} 监视属性通过 vm对象中的$watch方法或者 watch配置来监视指定的属性, 当属性发生变化 ...
【猿说VUE】如影相随，VUE计算属性和监视
VUE计算属性和监视 5.1 计算属性 Vue中会有部分数据经常依赖于别的数据的改变而做出改变,并且变化逻辑也较复杂,这个时候就需要用到计算属性:computed,也就是说对于当前数据是不确定的,要经 ...
Vue计算属性、监视属性
一.Vue计算属性 1. 定义:要用的属性不存在,要通过已有属性计算得来 2. 原理:底层借助了Object.defineproperty方法提供的getter和setter 3. get函数什么时候 ...
css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
Vue：计算属性及监听
一.计算属性: 1. 定义:计算属性是通过已有属性,计算的来的属性. 2. 原理:计算属性底层借助了Object.defineProperty()方法提供的getter和setter 3. get() ...
【vue系列-03】vue的计算属性，列表，监视属性及原理
vue的核心属性一,vue核心属性 1,计算属性 2,监视属性 3,样式绑定 3.1,class样式绑定 3.2,style样式绑定 4,条件渲染 5,列表渲染 5.1,遍历列表 5.2,key的作 ...
4.vue基础（三）计算属性-监视（侦听）属性
文章目录 1. 计算属性 1.1 插值语法实现姓名案例 1.2 methods实现 1.3 计算属性实现 2.监视(侦听)属性 2.1 天气案例 2.2 利用监听属性 2.3 深度监听 2.3.1 监 ...
Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等
一.类与结构体两者在Swift中差不了多少了类与结构体有很多相同的地方: (第2,3点是其他语言中不存在的) 1)都可以定义属性/方法/下标(结构体也可以定义方法了) 2)都能初始化(通过构造方法 ...
003-读书笔记-Vue官网计算属性与监听器
1.计算属性 1-1 计算属性概述计算属性也是 Vue 实例的属性,和 data 方法中返回的对象中的属性是等同的存在.通常来说,计算属性可以简单理解: 计算属性其实就是 Vue 实例的一个属性计 ...

Vue002_计算属性和监视

计算属性和监视

计算属性

监视属性

计算属性高级

代码展示：

页面展示

Vue002_计算属性和监视相关推荐

最新文章

热门文章