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 中的replace方法说明
Apr 13 Javascript
一个简单的js树形菜单
Dec 09 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
DOM事件探秘篇
2017/02/15 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python复制文件代码实现
2013/12/23 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
c++工程师面试问题
2013/08/04 面试题
考试作弊检讨书大全
2014/02/18 职场文书
课外访万家心得体会
2014/09/03 职场文书
追悼词范文大全
2015/06/23 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle