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 相关文章推荐
一行代码告别document.getElementById
Jun 01 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
JS常用跨域方法实现原理解析
Dec 09 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中防止SQL注入实现代码
2011/02/19 PHP
PHP之数组学习
2011/05/29 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
php将html转为图片的实现方法
2017/05/19 PHP
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
Vue仿百度搜索功能
2020/12/28 Vue.js
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
Python中装饰器学习总结
2018/02/10 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python接收手机短信的代码整理
2020/08/02 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
python 发送get请求接口详解
2020/11/17 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
心理健康教育心得体会
2013/12/29 职场文书
员工考核评语大全
2014/04/26 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle