语法之计算属性"/>
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基础语法之计算属性
发布评论