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 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
node跨域请求方法小结
Aug 25 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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的FTP学习(二)
2006/10/09 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
php创建session的方法实例详解
2015/01/27 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
php post换行的方法
2020/02/03 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
显示、隐藏密码
2006/07/01 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python实现电子词典
2020/04/23 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
古驰英国官网:GUCCI英国
2020/03/07 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
如何开发安全的AJAX应用
2014/03/26 面试题
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
白银帝国观后感
2015/06/17 职场文书
话题作文之自信作文
2019/11/15 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers