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 SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue实现数字滚动效果
Jun 29 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP中的加密功能
2006/10/09 PHP
php zend 相对路径问题
2009/01/12 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python列表(List)知识点总结
2019/02/18 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python3访问字典里的值实例方法
2020/11/18 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
个人函授自我鉴定
2014/03/25 职场文书
护林防火标语
2014/06/27 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
创业计划书之家政服务
2019/09/18 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL