什么是计算属性
模板内的表达式非常便利, 但是设计它们的初衷是用于简单运算的. 在模板中放入太多的逻辑会让模板过重且难以维护. 例如:
- <div id="example">
- {{ message.split('').reverse().join('') }}
- </div>
这里的表达式包含 3 个操作, 并不是很清晰, 所以遇到复杂逻辑时应该使用 vue 特带的计算属性 computed 来进行处理.
计算属性 (computed) 用于处理复杂逻辑
computed:{ }
computed 做为 vue 的选项是固定的
例子:
- <div id="itany">
- <p>{{mes}}</p>
- <p>{{count}}</p>
- </div>
- <script src="../JS/vue.js"></script>
- <script>
- new Vue({
- el:'#itany',
- data:{
- mes:'hello vue'
- },
- computed:{
- count:function(){
- // 切割 翻转 拼接
- return this.mes.split('').reverse().join('---')
- }
- }
- })
- </script>
输出结果为:
- hello vue
- vue---hello
练习
要求: 点击 button 按钮使数字以对应的价格改变
Image 2.PNG
代码如下:
- <div id="itany">
- <button v-on:click="num">总和</button>
- <p>{{arr}}</p>
- </div>
- <script src="../JS/vue.JS"></script>
- <script>
- new Vue({
- el:'#itany',
- data:{
- name:{price:2,count:0},
- names:{price:4,count:0},
- see:true
- },
- methods:{
- num:function(){
- this.name.count++,
- this.names.count++
- }
- },
- computed:{
- arr:function(){
- return this.name.price*this.name.count+this.names.price*this.names.count
- }
- }
- })
- </script>
来源: http://www.jb51.net/article/147662.htm