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 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 Javascript
js实现扫雷源代码
Nov 27 Javascript
利用javaScript处理常用事件详解
Apr 14 Javascript
springboot+VUE实现登录注册
May 27 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读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python实现tail -f 功能
2020/01/17 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
遇到的Mysql的面试题
2014/06/29 面试题
男方父母婚礼答谢词
2014/01/25 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
升旗仪式主持词
2014/03/19 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
民事辩护词范文
2015/05/21 职场文书
行政二审代理词
2015/05/25 职场文书
如何拟写通知正文?
2019/04/02 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python