vue.js计算属性computed用法实例分析


Posted in Javascript onJuly 06, 2018

本文实例讲述了vue.js计算属性computed用法。分享给大家供大家参考,具体如下:

需求:数据msg值为12345,我们现在需要反向显示成54321。

在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body> 
  <div id="box">
    {{msg}}
    <hr>
    {{ msg.split('').reverse().join('') }}
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el:'#box',
      data:{
        msg:'12345'
      }
    });
    console.log(vm.reMsg); 
  </script>
</body>
</html>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

vue.js计算属性computed用法实例分析

Vue提供computed的方式。例如:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body> 
  <div id="box">
    {{msg}}
    <hr>
    {{reMsg}}
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el:'#box',
      data:{
        msg:'12345'
      },
      computed:{
        reMsg:function(){
          return this.msg.split('').reverse().join('')
        }
      }
    });
    console.log(vm.reMsg); 
  </script>
</body>
</html>

同样的可以达到效果!

但是这边的reMsg是不能被修改的!! 也就是修改的时候他不会按照我们js给的规则去向反显示,因为默认只有getter,我们可以提供一个setter:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body> 
  <div id="box">
    {{msg}}
    <hr>
    {{reMsg}}
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el:'#box',
      data:{
        msg:'12345'
      },
      computed:{
        reMsg:{
          get:function(){
            return this.msg.split('').reverse().join('')
          },
          set:function(value){
            this.msg = value; //最后修改了msg  
          }
        }
      }
    });
    console.log(vm.reMsg = 'abcd');   //当我们修改这个变量的时候他的值也是跟随着我们js规则反向显示
  </script>
</body>
</html>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

vue.js计算属性computed用法实例分析

表达式计算demo:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- Vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div>
  <!--# 如表达式如果过长,或逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护 #-->
  {{ text.split(',').reverse().join(',') }}
  <!--# 所以在遇到复杂的逻辑时应该使用计算机属性 #-->
</div>
<div id="app">
  {{ reversedText }}
</div>
</body>
</html>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      text:'123,456'
    },
    //所有的计算属性都以函数的形式写在vue实例内的computed选项内,最终返回计算的结果
    computed:{
      reversedText:function () {
        //这里的this指向的是当前的vue实例
        return this.text.split(',').reverse().join(',');
      }
    }
  })
</script>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

vue.js计算属性computed用法实例分析

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JQuery 文本框使用小结
May 22 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
jQuery事件对象总结
Oct 17 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
简单实现js拖拽效果
Jul 25 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
vue实现微信分享功能
Nov 28 Javascript
vue.js实现的绑定class操作示例
Jul 06 #Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 #Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 #Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 #Javascript
深入浅析AngularJs模版与v-bind
Jul 06 #Javascript
vue中子组件调用兄弟组件方法
Jul 06 #Javascript
vue中element 上传功能的实现思路
Jul 06 #Javascript
You might like
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python同时迭代多个序列的方法
2020/07/28 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
合作投资意向书
2014/04/01 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
火灾现场处置方案
2014/05/28 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
公司聚餐通知
2015/04/22 职场文书
建国大业观后感600字
2015/06/01 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python