vue中的计算属性实例详解


Posted in Javascript onSeptember 19, 2018

什么是计算属性

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

<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按钮使数字以对应的价格改变

vue中的计算属性实例详解

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>
Javascript 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
JS实现简单短信验证码界面
Aug 07 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
Vue axios设置访问基础路径方法
Sep 19 #Javascript
json前后端数据交互相关代码
Sep 19 #Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 #Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 #Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 #Javascript
vue动态设置img的src路径实例
Sep 18 #Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 #Javascript
You might like
PHP中其实也可以用方法链
2011/11/10 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python如何处理程序无法打开
2020/06/16 Python
Python图像读写方法对比
2020/11/16 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
最新大学生自我评价
2013/09/24 职场文书
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
收银员岗位职责
2014/02/07 职场文书
总结表彰大会主持词
2014/03/26 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
灵能百分百第三季什么时候来?
2022/03/15 日漫