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隐藏控件的方法
Sep 21 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
浅谈js原生拖放
Nov 21 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
详解Node.js串行化流程控制
May 04 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
利用js实现简单开关灯代码
Nov 23 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访问查询mysql数据的三种方法
2006/10/09 PHP
php遍历数组的方法分享
2012/03/22 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
js跑马灯代码(自写)
2013/04/17 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python字典的核心底层原理讲解
2019/01/24 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
abstract是什么意思
2012/02/12 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
社区矫正工作方案
2014/06/04 职场文书
安全生产宣传标语
2014/06/06 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
护理专业自我评价
2015/03/11 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server