Vue基础语法之计算属性

计算属性

设计的初衷在千减轻模板上的业务负担，当数据链上出现复杂衍生数据时，我们更期望以一种易维护的方式去使用它。

基本使用

<div id="app"><h2>{{firstName+lastName}}</h2><h2>{{firstName}}{{lastName}}</h2><h2>{{getFullName()}}</h2><!--方法--><h2>{{fullName}}</h2><!--<属性-->
</div>
<script src="../Js/vue.js"></script>
<script>let app = new Vue({el: '#app',data: {firstName: '夏吕',lastName: '千千',},/*   computed:计算属性*/computed: {fullName: function () {return this.firstName + this.lastName}},methods: {getFullName() {return this.firstName + this.lastName}}})
</script>

复杂操作

<div id="app"><h2>总价格：{{totalPrice}}</h2></div>
<script src="../Js/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {/*数组里的 是对象*/book: [{id: 101, name: '代码大全', price: 102},{id: 102, name: '编程艺术', price: 89},{id: 103, name: '深入理解计算机原理', price: 82},{id: 104, name: '现代操作系统', price: 88},]},computed: {totalPrice: function () {let result = 0for(leti = 0;i < this.book.length;i++){result += this.book[i].price}return result}}})
</script>

计算属性setter和getter(计算属性的本质)

<div id="app">{{fullName}}
</div>
<script src="../Js/vue.js"></script>
<script>var  app=new Vue({el:'#app',data:{firstName:'任',lastName:'阳峰'},computed: {fullName:{set:function(newValue){const names=newValue.split(' ');this.firstName=names[0];this.lastName=name[1];},get:function () {return this.firstName+' '+this.lastName}}}})
</script>

计算属性性能比methods高

计算属性会进行缓存，如果多次使用时，只会调用一次。

<div id="app"><!--函数调用四次--><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><!--只调用一次--><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2>
</div>
<script src="../Js/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {firstName: '任',lastName: '阳峰'},computed: {fullName: function () {console.log("hahahaha");return this.firstName + this.lastName}},methods:{getFullName:function () {console.log("hahahaha");return this.firstName+this.lastName;}}})
</script>

Vue基础语法之计算属性相关推荐

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...
Vue——基础语法篇
Vue--基础语法篇 author:木子六日学习视频来源 coderwhy老师的vue教学文章目录 Vue--基础语法篇 author:木子六日学习视频来源 01.hello vue 02.vu ...
Vue基础语法必知必会
文章目录一.插值操作 1.Mustache语法 2.v-once指令的使用 3.v-html指令的使用 4.v-text指令的使用 5.v-pre指令的使用 6.v-cloak指令的使用二.动态绑 ...
Vue -- 基础语法指令(v-bind，v-if，v-else，v-else-if，v-for）
文章目录 1. Vue--基础语法指令(v-bind,v-if,v-else,v-else-if,v-for) 1.1 v-bind 1.1.1 代码示例 1.1.2 运行结果 1.1.3 小结 1. ...
vue，computed，计算属性
vue,computed,计算属性用法: computed: {didiFamily: {// getterget: function () {return this.data_i + ' ' + ...
一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性
一.插值操作 1. Mustache 如何将data中的文本数据,插入到HTML中呢? 我们已经学习过了,可以通过Mustache语法(也就是双大括号). Mustache: 胡子/胡须. 我们可以像 ...
Vue基础语法-计算属性
计算属性 * 计算属性计算属性写法是个方法,但是使用的时候作为属性使用.计算属性中使用到data中的数据只要发生了变化,计算属性就会重新计算.如果两次获取计算属性的时候,里面使用的属性没有发生变化, ...

Vue基础语法之计算属性

计算属性

Vue基础语法之计算属性相关推荐

最新文章

热门文章