vue 第四天（计算属性的使用）

因为{{div1+div2+div3+div4+…+n}}这种写法比较复杂所以加上 computed 计算属性

1、computed 计算属性

cmputed 可以完成各种复杂的逻辑,包括运算,函数调用等,只要最终返回一个结果就可以

computed 具有缓存功能,只有依赖数据发生改变，才会重新进行计算，否则直接返回之前的计算结果

每个计算属性都包含一个 get 和 set

利用 computed 计算属性进行计算

<div id="apps"><div>{{div1}}</div><div>{{div2}}</div><div>{{div3}}</div>
</div><script>const vue = new Vue({el: "#apps",data: {div1: 123,div2: 456},computed: {div3: function () {<!-- 这里写计算属性的一些逻辑判断复杂操作-->return this.div1 + this.div2;}}})
</script>

2、get 大多数情况下可以省略

下面是简化和一个 get 写法

get相当于输出值

computed: {div3: {get:function() {return this.div1 + this.div2;}},div3: function () {return this.div1 + this.div2;}}

3、set 不常用（计算属性一般是没有set方法，只读属性）

在浏览器敲f12 上输入 vue.div3 = “hello 你好”

set相当于赋值

<div id="apps"><div>{{div1}}</div><div>{{div2}}</div><div>{{div3}}</div>
</div>
<script>var vue = new Vue({el: "#apps",data: {div1: "123",div2: "456"},computed: {div3: {set: function (input) {<!--在控制台输入 vue.div3 = "hello 你好" -->const split = input.split(" ");this.div1 = split[0];this.div2 = split[1];},get: function () {return this.div1 + "-------" + this.div2;}}}})
</script>

4、计算属性 computed和methods的对比

计算属性 computed 如果执行多次不做修改添加的话就执行一次

methods 如果执行多次不做修改添加的话，调用多少次执行多少次

为什么计算属性就执行一次呢，因为计算属性有缓存

花开一千年,花落一千年,花叶永不见

vue 第四天（计算属性的使用）相关推荐

vue，computed，计算属性
vue,computed,计算属性用法: computed: {didiFamily: {// getterget: function () {return this.data_i + ' ' + ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
二、Vue（发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画)）
一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用 ...
Vue.js系列之四计算属性和观察者
一.计算属性 1.模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的.在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id="example&quo ...
初识 Vue（10）---(计算属性的 setter 和 getter)
计算属性的 setter 和 getter 方法一: <!DOCTYPE html> <html lang="en"> <head><me ...
Vue源码之计算属性watcher
在之前的文章<Vue源码分析基础之响应式原理>和<Vue源码实现之watcher拾遗>中,我们学习了watcher的实现原理.紧跟着这几天准备花点时间学习下watcher在vu ...
Vue中的computed计算属性
文章目录 computed与watch的异同不同点相同点示例源码结果分析 computed与watch的异同不同点触发条件不同 computed计算属性会依赖于使用它的data属性 ...
vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
vue问题六：计算属性，依赖发生变化时，重新计算computed：
<el-form-item label="单价:" prop="price" ><el-input v-model="addform ...

vue 第四天（计算属性的使用）

vue 第四天（计算属性的使用）

1、computed 计算属性

利用 computed 计算属性进行计算

2、get 大多数情况下可以省略

3、set 不常用（计算属性一般是没有set方法，只读属性）

4、计算属性 computed和methods的对比

vue 第四天（计算属性的使用）相关推荐

最新文章

热门文章

vue 第四天 （计算属性的使用）

vue 第四天 （计算属性的使用）

1、computed 计算属性

利用 computed 计算属性进行计算

2、get 大多数情况下可以省略

3、set 不常用（计算属性一般是没有set方法，只读属性）

4、计算属性 computed和methods的对比

vue 第四天 （计算属性的使用）相关推荐

最新文章

热门文章

vue 第四天（计算属性的使用）

vue 第四天（计算属性的使用）

vue 第四天（计算属性的使用）相关推荐