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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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
JS实现php的伪分页
2008/05/25 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
Python 切分数组实例解析
2019/11/07 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
销售会计岗位职责
2014/03/15 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
施工安全责任书
2014/04/14 职场文书
中秋手机店促销方案
2014/06/16 职场文书
锦旗赠语
2015/06/23 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
table不让td文字溢出操作方法
2022/12/24 HTML / CSS