【Vue】Re03 computed属性计算和ES6的一些补充
一、Computed属性计算
四种计算处理的方式方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!-- 计算属性 computed -->
<div id="v">
<!-- 变量凭借直接显示处理 -->
<h3>{{firstName}} {{lastName}}</h3> <!-- 第二种：在模板语法内运算处理 -->
<h3>{{firstName + " " + lastName}}</h3> <!-- 第三种：使用方法进行处理 -->
<h3>{{splicingStr()}}</h3> <!-- 第四种：使用方法的定义，声明在computed中，嵌入模板使作为变量使用 -->
<h3>{{splicingStr2}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : '#v',
data : {
firstName : 'Dai',
lastName : 'Zeal4J'
},
methods : {
splicingStr : function () {
return this.firstName + ' ' + this.lastName;
},
},
computed : {
splicingStr2 : function () {
return this.firstName + ' ' + this.lastName;
}
}
});
</script> </body>
</html>
如果计算逻辑更为复杂，使用computed选项的处理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!-- 为了显示总价格，虽然可以在模板语法内进行计算，但不建议 -->
<div id="v">
<h3>价格合计 ： {{getBookSum}}</h3>
<h3>价格合计 ： {{getBookSumByForIn}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
bookList : [
{ id : 1, name : 'Unix编程', price : 100 },
{ id : 2, name : '深入理解计算机原理', price : 100 },
{ id : 3, name : '现代操作系统', price : 100 },
{ id : 4, name : '代码大全', price : 100 }
]
},
computed : {
getBookSum : function () {
let sum = 0;
for (let i = 0; i < this.bookList.length; i++) {
sum += this.bookList[i].price;
}
return sum;
},
getBookSumByForIn : function () { // 使用ES6语法
let sum = 0;
for (let book of this.bookList) {
sum += book.price;
}
return sum;
}
} });
</script> </body>
</html>
setter&getter属性概述：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../dependencies/vue.js"></script>
</head>
<body> <div id="v">
</div> <script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
firstName : 'nico',
lastName : 'jacob'
},
computed : {
fullName : {
set : function (newVal) { // 如果要设置就需要传入形参中处理
// 因为一般不怎么作用于修改属性值，set用不上 -> 不写了
},
get : function () {
// 处理计算的逻辑都放在这个里面，所以省略开始直接对象名称衔接方法处理
return 0;
}
}
}
});
</script>
<!--
computed 和 method的区别在于?
computed具备缓存特性，多次重复性调用将会触发缓存
method则不具备，方法调用一次就重新赋值一次
如果是重复性的频率高的获取，可以使用computed更好，减少内存消耗
--> </body>
</html>
computed & methods的区别？
methods不具备缓存功能
/* 计算属性，用于处理一些属性合计或者需要计算得到的结果值 */
/* 这里虽然是一个方法，但是使用上看是作为一个属性进行操作 */
/* 要注意一个问题，data中的属性的值发生变化，那么将会重新调用computed内的函数，，并渲染 */
/* 当computed内部的函数被调用两次以上的情况，如果里面涉及的属性值没有发生改变，则使用缓存的值进行渲染 */
演示案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="v">
<h3>{{getFullName()}}</h3>
<h3>{{getFullName()}}</h3>
<h3>{{getFullName()}}</h3>
<hr>
<h3>{{getFullNameByCompute}}</h3>
<h3>{{getFullNameByCompute}}</h3>
<h3>{{getFullNameByCompute}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const v = new Vue({
el : '#v',
data : {
firstName : 'kobe',
lastName : 'bryant'
},
methods : {
getFullName() {
let fullName = this.firstName + this.lastName;
console.log('methods -> ' + fullName);
return fullName;
}
},
computed : {
getFullNameByCompute() {
let fullName = this.firstName + this.lastName;
console.log('computed -> ' + fullName);
return fullName;
}
}
});
</script> </body>
</html>
二、ES6相关
1、块级作用域，Let变量关键字和Var变量关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <button>按钮01</button>
<button>按钮02</button>
<button>按钮03</button>
<button>按钮04</button>
<button>按钮05</button> <script type="text/javascript"> // 代码块内的作用域问题
{
var a = 100;
let b = 200;
console.log("in codeBlock var a -> " + a);
console.log("in codeBlock let b -> " + b);
}
console.log("out codeBlock var a -> " + a);
// console.log("out codeBlock let b -> " + b); // 出作用域 let修饰的变量将会报错无法获取 // --------------------------------------------------------------------------------------------------------- // 函数问题
var fun;
if (true) {
var txt = '打印的内容';
fun = function () {
console.log(txt);
}
} // 在调用的时候 txt变量可能被改变
txt = '更改的内容';
fun(); // --------------------------------------------------------------------------------------------------------- // for中的块级作用域问题
var buttons = document.getElementsByTagName('button');
// for (var i = 0; i < buttons.length; i++) {
// buttons[i].addEventListener('click', function () {
// console.log(('第' + i + '个按钮被点击')); // 第5个按钮被点击 无论点击哪一个按钮都是显示第五个按钮被点击
// });
// } // 使用闭包解决问题
for (var i = 0; i < buttons.length; i++) {
(function (ii) { // 这一行的i只是一个形参,和外部的ib
buttons[ii].addEventListener('click', function () {
console.log(('第' + (ii + 1) + '个按钮被点击'));
});
})(i);
}
// 为什么闭包能够解决上述的问题？因为函数具有作用域的功能 // 使用let则不会存在这个问题
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
console.log(('第' + (i + 1) + '个按钮被点击'));
});
}
// ---------------------------------------------------------------------------------------------------------
</script> </body>
</html>
2、Const常量定义关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script type="text/javascript">
// const 常量修饰
// 声明变量时优先使用const定义，如果变量需要被改变赋值再使用let进行修饰 // 1、const声明的常量不允许二次赋值
const val = 100;
// val = 200; × // 2、const声明的常量不允许不赋值
// const val2; × 声明即必须赋值 // 3、如果 const常量指向的是一个对象，则不可以改变对象的指向，但是对象的属性可以被更改
const obj = {
name : 'objectA',
};
// obj = {}; × 不允许重新赋值一个新对象
obj.name = 'ooo'; // 属性允许重新赋值
</script> </body>
</html>
3、对象字面量和函数的增强：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 对象字面量增强 -->
<script>
/* 常规JS创建对象写法 */
const obj = new Object(); /* 字面量JS创建对象写法 */
const literalObj = {}; /* ES5属性赋值写法 */
const p1 = {
key1 : 100,
key2 : 'aaa',
key3 : true
} /* ES6支持外部变量同名赋值 */
const key4 = 50;
const key5 = 'bbb';
const key6 = false; const p2 = {
key4,
key5,
key6
}
console.log(p2); /* ES5的方法声明 */
const m1 = {
set : function (val1, val2) { },
get : function () {
return 100;
}
}
/* ES6支持方法声明的增强 */
const m2 = {
set(val1, val2) { },
get() {
return 100;
}
}
</script>
</body>
</html>
4、对JS对象的比较判断处理方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript"> /* JS对象不能像后端编程语言一样，使用地址值进行判断是否为同一个对象 */
const getObject = function() {
return {
name : 'aaa',
age : 22,
gender : true
}
} /* 这里使用函数获取三个对象 */
const obj1 = getObject();
const obj2 = getObject();
const obj3 = getObject(); /* 如果三者都为同一个对象，则对obj1修改属性，其23都将改变，反之三者不是同一个对象 */
obj1.age = 33; /* 打印结果 */
console.log(obj1);
console.log(obj2);
console.log(obj3); /* 如果是这样返回的对象，就是返回一个地址，三者都为同一个对象 */
const finalObject = {
name : 'bbb',
age : 44,
gender : false
}
const getObject2 = function() {
return finalObject;
}
const obj4 = getObject2();
const obj5 = getObject2();
const obj6 = getObject2();
obj4.age = 88;
console.log(obj4);
console.log(obj5);
console.log(obj6);
</script>
</body>
</html>
【Vue】Re03 computed属性计算和ES6的一些补充的更多相关文章
- vue的computed属性
vue的computed属性要注意的两个地方,1,必须有return,2,使用属性不用括号 <div> <input type="text" v-model=&q ...
- vue 的 computed 属性在什么时间执行
vue 的 computed 属性在什么时间执行
- vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
- sau交流学习社区—vue总结：使用vue的computed属性实现监控变量变化，使用vue的watch属性监控变量变化从而实现其他业务
有时候遇到这么个需求,输入框为空的时候,请求一遍接口,如果输入框不为空的时候,需要点击搜索按钮请求接口. 同步sau交流学习社区:https://www.mwcxs.top/page/464.html ...
- vue之computed（计算属性）
所谓计算属性就是计算data里的数据属性. computed:实时监听的该功能. 即监听是否有修改(浏览器未打开时即开始监听了),监听的值有修改则添加 所监听的data数据属性变化了,自动实时修改. ...
- vue的computed属性的理解
computed: { selectedQuestions() { let selectedQuestions = this.editedItem.questions; return this.que ...
- Vue中computed分析
Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
- vue中computed的作用以及用法
在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
随机推荐
- 可观测性平台夜莺开源项目发布V6正式版！
夜莺开源项目在2023.7月底发布了V6版本,这个版本开始,项目目标不止于做一款开源监控系统,而是要做一款开源可观测性平台,不过路漫漫其修远兮,初期只是把日志数据源引入并完成了基本的可视化,后续会着力 ...
- Bind DNS服务——带KEY的区域传送与子域授权
Linux基础服务--Bind DNS服务 Part3 带KEY的区域传送与子域授权 带KEY的区域传送 上文提到了区域传送,但实际上在区域传送的时,传送的区域文件并不会被加密.因此一般的区域传送并不 ...
- 认真学习CSS3-问题收集-102号-关于定位
css中有关于定位的一个属性position. 在w3cschool中,position的介绍如下: 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定 ...
- 基于cifar数据集合成含开集、闭集噪声的数据集
前言 噪声标签学习下的一个任务是:训练集上存在开集噪声和闭集噪声:然后在测试集上对闭集样本进行分类. 训练集中被加入的开集样本,会被均匀得打上闭集样本的标签充当开集噪声:而闭集噪声的设置与一般的噪声标 ...
- 韦东山freeRTOS系列教程之【第五章】队列(queue)
目录 系列教程总目录 概述 5.1 队列的特性 5.1.1 常规操作 5.1.2 传输数据的两种方法 5.1.3 队列的阻塞访问 5.2 队列函数 5.2.1 创建 5.2.2 复位 5.2.3 删除 ...
- matlab常用语法简介
目录 一.输入函数 1.disp函数 二.合并字符串 1.strcat函数 (1)strcat函数可用于合并字符串,用法如图: 2.利用向量,用法如图: 3.利用"num2str" ...
- Nunjucks
Nunjucks是什么东东?其实它是一个模板引擎. 那什么是模板引擎? 模板引擎就是基于模板配合数据构造出字符串输出的一个组件.比如下面的函数就是一个模板引擎: function examResult ...
- OffscreenCanvas-离屏canvas使用说明
OffscreenCanvas 是一个实验中的新特性,主要用于提升 Canvas 2D/3D 绘图的渲染性能和使用体验.OffscreenCanvas 的 API 很简单,但是要真正掌握好如何使用. ...
- django 信号判断是新增、修改还是删除
在Django的信号处理器中,你可以使用一些方法来确定信号是关于新增(create).修改(update)还是删除(delete)的.这通常涉及到检查 created 和 instance 参数的值. ...
- Java 网络编程（TCP编程 和 UDP编程）
1. Java 网络编程(TCP编程 和 UDP编程) @ 目录 1. Java 网络编程(TCP编程 和 UDP编程) 2. 网络编程的概念 3. IP 地址 3.1 IP地址相关的:域名与DNS ...