关键词：
【Vue2.0学习】—计算属性（三十四）
-
定义：要用的属性不存在，要通过已有的属性得来
-
原理：底层借助了
Object.defineproperty方法提供的getter和setter
get函数什么时候执行？
-
初次读取时会执行
-
当依赖的数据发生变化时会被再次调用
-
优势：与
methods实现相比，内部有缓存机制，效率更高，调式方便
备注：
- 计算属性最终会出现在
vm上，直接读取使用即可 - 如果计算属性要被修改，那必须写
set函数去响应修改，且set中要引起计算时依赖的数据发生变化
<div id="root">
姓：<input type="text" v-model="firstname"> <br> <br> 名： <input type="text" v-model="lastname"> <br> <br> 姓名：
<span>fullName</span>
</div>
<script>
const vm = new Vue(
el: "#root",
data:
firstname: '张',
lastname: '三'
,
computed:
fullName:
//当有人读取fullName时，get就会被调用且返回值作为fullName的值
// get什么时候调用？初次读取fullName时；所依赖的数据发生变化
get()
console.log('get被调用了');
return this.firstname + '-' + this.lastname
,
set(value)
console.log('set', value);
const arr = value.split('-');
this.firstname = arr[0];
this.lastname = arr[1];
)
</script>
简写版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
计算属性：
定义：要用的属性不存在，要通过已有的属性得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行？
初次读取时会执行
当依赖的数据发生变化时会被再次调用
优势：与methods实现相比，内部有缓存机制，效率更高，调式方便
备注：
计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
-->
<div id="root">
姓：<input type="text" v-model="firstname"> <br> <br> 名： <input type="text" v-model="lastname"> <br> <br> 姓名：
<span>fullName</span>
</div>
<script>
const vm = new Vue(
el: "#root",
data:
firstname: '张',
lastname: '三'
,
computed:
//完整写法
// fullName:
// //当有人读取fullName时，get就会被调用且返回值作为fullName的值
// // get什么时候调用？初次读取fullName时；所依赖的数据发生变化
// get()
// console.log('get被调用了');
// return this.firstname + '-' + this.lastname
// ,
// set(value)
// console.log('set', value);
// const arr = value.split('-');
// this.firstname = arr[0];
// this.lastname = arr[1];
//
//
//
//简写
fullName()
return this.firstname + this.lastname
)
</script>
</body>
</html>
vue2.0学习—过滤器（四十四）(代码片段)
【Vue2.0学习】—过滤器（四十四）<divid="root"><h2>显示格式化后的时间</h2><!--计算属性实现--><h4>现在是:fmtTime</h4><!--methods实现--><h4>现在是:getTime()</h4&g 查看详情
vue2.0学习—watch和computed对比（三十七）(代码片段)
【Vue2.0学习】—watch和computed对比（三十七）计算属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible 查看详情
vue2.0学习—理解数据代理（三十一）(代码片段)
【Vue2.0学习】—理解数据代理（三十一）什么是数据代理？通过一个对象代理对另一个对象中属性的操作（读/写）<script>letobj=x:100letobj2=y:200Object.defineProperty(obj2,'x',get()returnobj.x,set(val 查看详情
vue2.0学习—键盘事件（三十三）(代码片段)
【Vue2.0学习】—键盘事件（三十三）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content=&# 查看详情
vue2.0学习—object.defineproperty（三十）(代码片段)
【Vue2.0学习】—Object.defineProperty（三十）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible 查看详情
vue2.0学习—条件渲染（三十九）(代码片段)
【Vue2.0学习】—条件渲染（三十九）一、v-for指令1、用于展示数据的列表2、语法：v-for="(item,index)"inXXX:key="yyyy"3、可遍历数组、对象、字符串、指定次数<divid="root"><h2>人员列表</h2... 查看详情
vue2.0学习—class与style绑定（三十八）(代码片段)
【Vue2.0学习】—class与style绑定（三十八）一、理解在应用界面中，某个元素的样式时变化的class/style绑定就是专门用来实现动态样式效果的技术二、class绑定:class='xxx'表达式是字符串:'classA'表达式是对... 查看详情
vue2.0学习—el与data的两种写法（三十六）(代码片段)
【Vue2.0学习】—el与data的两种写法（三十六）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"conten 查看详情
vue2.0学习—事件处理和事件修饰符（三十二）(代码片段)
【Vue2.0学习】—事件处理和事件修饰符（三十二）事件处理事件的基本使用：1、使用v-on:XXX或@XXX绑定事件，其中XXX是事件名2、事件的回调需要配置在methods对象中，最终会在vm身上3、methods中配置的函数... 查看详情
wpf学习第三十四章资源基础(代码片段)
原文:【WPF学习】第三十四章资源基础 WPF允许在代码中以及在标记中的各个位置定义资源（和特定的控件、窗口一起定义，或在整个应用程序中定义）。 资源具有许多重要的优点，如下所述： 高效。可以通过资源定... 查看详情
vue2.0—ref属性（十四）
【Vue2.0】—ref属性（十四） 查看详情
全国计算机等级考试二级python（2021年9月）备考笔记第十四天(代码片段)
文章目录Python二级等考(第三季)精品题5单项选择题第一题第二题第三题第四题第五题第六题第七题第八题第九题第十题第十一题第十二题第十三题第十四题第十五题第十六题第十七题第十八题第十九题第二十题第二十一题第二十... 查看详情
vue2.0笔记——计算属性和侦听器(代码片段)
计算属性在模板使用表达式会非常便利，但是仅适用于简单的运算。当放入太多的逻辑，使得模板过于难以维护。对于这样，就像一个数据需要根据另一个数据的变动而变动。也因此计算属性有了可以监视的能力。<br/>所以... 查看详情
我的qtcreator学习笔记（三十四）——网络编程之http与ftp(代码片段)
参考文献：《QtCreator快速入门》第三版霍亚飞编著网络访问接口网络请求由QNetworkRequest类来表示，它也作为与请求有关的信息的容器。QNetworkAccessManager类用来协调网络操作，可以调度创建好的请求，并发射信号... 查看详情
vue2.0的漫长学习ing-2-7(代码片段)
Component组件props属性设置 props选项就是设置和获取标签上的属性值的，例如我们有一个自定义的组件<xiaofan></xiaofan>,这时我们想给他加个标签属性写成<pandahere=’sichuan’></panda>意思就是xiaofan来自sichuan，当然... 查看详情
vue2.0学习—v-cloak指令（四十七）(代码片段)
【Vue2.0学习】—v-cloak指令（四十七）v-cloak指令：本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出XXX的问题本小结知识点补充属性选择器&... 查看详情
三十四vertical-align属性应用(代码片段)
...ertical-alignCSS的vertical−align\\colorredvertical-alignvertical−align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。官方解释：用于设置一个元素的垂直对齐方式\\colorred垂直对齐方式垂直对齐方... 查看详情
机器学习sklearn（77）：算法实例（三十四）回归线性回归大家族多重共线性：岭回归与lasso岭回归(代码片段)
1最熟悉的陌生人：多重共线性逆矩阵存在的充分必要条件 行列式不为0的充分必要条件 矩阵满秩的充分必要条件 查看详情