需求：数据msg值为12345，我们现在需要反向显示成54321。

1.在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.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'

            }

        });

    </script>

</body>

</html>

效果图：

Vue提供computed的方式。例如：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <script src="http://unpkg.com/vue/dist/vue.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="http://unpkg.com/vue/dist/vue.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 = 'abcde');     //当我们修改这个变量的时候他的值也是跟随着我们js规则反向显示

    </script>

</body>

</html>

效果图：

.

vue2.X computed 计算属性的更多相关文章

  1. vue computed计算属性和watch监听属性解疑答惑

    computed计算属性     计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...

  2. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  3. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  4. Vue（七）：computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

  5. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  6. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. computed 计算属性

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...

  8. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  9. vue-methods方法与computed计算属性的差别

    好吧,我就是单纯的举个例子:实现显示变量 message 的翻转字符串 第一种:methods:我们可以通过在表达式中调用方法来达到同样的效果: 第二种:computed:计算属性 上面的2中方法都实 ...

随机推荐

  1. MySql数据库 - 2.启动与关闭

    MySql服务的启动: 右键计算机 - 管理 - 服务和应用程序 - 服务 - 右键 MySQL80 可以启动/停止MySQL(也可以点击属性 改变启动类型:手动/自动). 自动启动状态下,每次打开计 ...

  2. Unity3D 绘制扇形/环形

    using UnityEngine; using System.Collections; using System.Collections.Generic; public class Cone : M ...

  3. 练级（train）

    练级(train) 试题描述 cxm 在迷宫中练级.迷宫可以看成一个有向图,有向图的每个边上都有怪物.通过每条边并消灭怪物需要花费 \(1\) 单位时间.消灭一个怪物可以得到一定数量的经验值.怪物被消 ...

  4. 寻找web根目录

    有时候,在利用一些命令执行漏洞时,可以以较高权限执行一些操作,但在我们想要上传shell的时候,却找不到网站根目录,下面是一些日常使用的寻找网站根目录的方法,记录下: 1.jsp 查看当前路径,在这个 ...

  5. c#调用 WinRAR.exe以命令行形式实现文件、文件夹的解压缩

    在实际项目应用中会偶尔使用文件的压缩上传以及服务器端的加压处理,故写此文记录以备不时之需. 1.自己编写的ZipHelper类. public static class ZipHelper { pri ...

  6. 冬训 day2

    模拟枚举... A - New Year and Buggy Bot(http://codeforces.com/problemset/problem/908/B) 暴力枚举即可,但是直接手动暴力会非 ...

  7. Dictionary To Dynamic

    原文发布时间为:2012-12-25 -- 来源于本人的百度文章 [由搬家工具导入] public static class DictionaryExt    {        /// <sum ...

  8. js3:数据类型，数组，String各个属性，以及字符串表达式用eval计算

    原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>js</title> & ...

  9. poj 3281 Dining 拆点 最大流

    题目链接 题意 有\(N\)头牛,\(F\)个食物和\(D\)个饮料.每头牛都有自己偏好的食物和饮料列表. 问该如何分配食物和饮料,使得尽量多的牛能够既获得自己喜欢的食物又获得自己喜欢的饮料. 建图 ...

  10. DBus介绍

    1. 介绍 DBus是一种桌面环境的进程间通讯(IPC)机制,有低时延.低消耗等优点 基于socket,提供了一对一的对等通讯:使用dbus-daemon作为后台进程时,可实现多对多通讯 由如下三个层 ...