zoukankan      html  css  js  c++  java
  • vue2.X computed 计算属性

    需求:数据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>
    

    效果图:

    .

  • 相关阅读:
    DButils工具类能够用来获取数据库连接向数据库插入更新删除对象
    Android 实现ActionBar定制
    查看CentOs6.5/7的系统版本号
    安装Was liberty之步骤
    在centOS上安装VNC
    SCP远程拷贝命令
    Was liberty资料总结
    罗杰斯:做你喜欢的工作,你会变成个有钱人
    【Java/csv】一个CSV文件解析类(转载)
    当你的才华还撑不起你的野心时,那你就应该静下心来学习。
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7617477.html
Copyright © 2011-2022 走看看