vue 09 计算computed视频自学

computed 计算

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">{{ msg.split('').reverse().join('') }}
</div>

这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理

当你需要从现有数组得到新的数据这个时候你就需要计算了computed

<div id="example">
<p>原来的信息: "{{ msg }}"</p>
<p>计算翻转的信息: "{{ rmsg }}"</p>
</div>

var vm = new Vue({
el: '#example',
data: {
msg: 'Hello'},
computed: {
// 计算属性的 getterrmsg: function () {
// `this` 指向 vm 实例
return this.msg.split('').reverse().join('')}}
})

结果：

原来的信息: "hello"

计算翻转的信息: "olleh"

computed 与method

强调了computed区别于method最重要的两点

computed是属性调用，而methods是函数调用
computed带有缓存功能，而methods不是

computed 原理

JavaScript有一个特性是 Object.defineProperty ,它能做很多事，但我在这篇文章只专注于这个方法中的一个：

var person = {};
Object.defineProperty (person, 'age', {get: function () {console.log ("Getting the age");return 25;}
});
console.log ("The age is ", person.age);
// Prints:
//
// Getting the age
// The age is 25

(Obeject.defineProperty是Object的一个方法，第一个参数是对象名称，第二个参数是要设置的属性名，第三个参数是一个对象，它可以设置这个属性是否可修改、可写等，而这篇文章主要使用的是Obeject.defineProperty的访问器属性

尽管 person.age 看起来像是访问了对象的一个属性，但其实在内部我们是运行了一个函数。

vue 09 计算computed视频自学相关推荐

Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
vue的计算属性computed
计算属性的应用场景从已有的数据A中计算等到的新的数据B,使用计算属性如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 定义格式计算属 ...
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分预计效果代码结果展示预计效果页面输入数学.物理.英语分数,自动计算出总分和平均分,并展示到界面,如下图所示代码 ...
vue 的计算属性报错Computed property “disa“ was assigned to but it has no setter.
原因: vue的计算属性不能设置,只能读取解决:
vue 项目进行直播视频 vue-video-player
vue 项目进行直播视频 4-30 更新一个人的力量总是有限的,所以提供一些参考文档,大佬博客官方的详细文档:https://docs.videojs.com/docs/api/player.ht ...
Vue中的computed属性
1.前言本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...
17.Vue的计算属性
目录 1.姓名案例插值语法实现 2.姓名案例methods实现 3.姓名案例计算属性实现 4.get什么时候会被调用? 5.set什么时候会被调用? 6.计算属性简写 7.总结我们这一节将通过一个小 ...
vue项目中导入视频
vue项目中引入视频插件一.安装插件 vue-video-player npm install vue-video-player -s 二.在main.js里倒入并使用 import VideoPl ...
Vue的计算属性、侦听属性与过滤器解析
文章目录知识点计算属性计算属性的基本使用计算属性的 setter 和 getter 侦听属性计算属性与侦听属性对比过滤器过滤器使用方法过滤器应用场景综合小练习知识点计算属性计算 ...

vue 09 计算computed视频自学

vue 09 计算computed视频自学相关推荐

最新文章

热门文章