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 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
微信小程序实现日历签到
Sep 21 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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创建多级目录代码
2008/06/05 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
jQuery 回车事件enter使用示例
2014/02/18 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python批量提取word内信息
2015/08/09 Python
Python运算符重载详解及实例代码
2017/03/07 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
浅谈python之新式类
2018/08/12 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
python实现爬山算法的思路详解
2019/04/09 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
python如何求100以内的素数
2020/05/27 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
毕业生的自我评价范文
2013/12/31 职场文书
党校学习自我鉴定
2014/02/24 职场文书
美术指导助理求职信
2014/04/20 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
男方婚礼答谢词
2015/01/20 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android