zoukankan      html  css  js  c++  java
  • vue9 计算属性 computed

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
    
        </script>
    </head>
    <body>
        <div id="box">
            {{a}}
            <br>
           {{b}}
        </div>
        <script>
            var vm=new Vue({
                el:'#box',
                data:{
                    a:1
                },
                computed:{
                    b:function(){//默认调用get
                        //业务逻辑代码
                        return 2;
                    }
                }
            });
    
            console.log(vm.a);
        </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
    
        </script>
    </head>
    <body>
        <div id="box">
            {{a}}
            <br>
            {{b}}
        </div>
        <script>
            var vm=new Vue({
                el:'#box',
                data:{
                    a:1
                },
                computed:{
                    b:function(){
                        //业务逻辑代码
                        return this.a+1;
                    }
                }
            });
    
            document.onclick=function(){
                vm.a=101;
            };
        </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
    
        </script>
    </head>
    <body>
        <div id="box">
            {{a}}
            <br>
            {{b}}
        </div>
        <script>
            var vm=new Vue({
                el:'#box',
                data:{
                    a:1
                },
                computed:{//computed里面可以放置一些业务逻辑代码,一定记得return
                    b:{
                        get:function(){
                            return this.a+2;
                        },
                        set:function(val){
                            this.a=val;
                        }
                    }
                }
            });
    
            document.onclick=function(){
                vm.b=10;
            };
        </script>
    </body>
    </html>
  • 相关阅读:
    企业老板怎么获得战略视野及组织管理能力?看这些管理书籍就行 了
    公司管理者必读的5本经典书籍推荐
    如何提升自己的领导能力?
    如何培养自己的商业思维能力?
    口才训练书籍推荐
    公司管理课程,我推荐12Reads系列
    比较好的管理学书籍推荐
    如何自学企业管理?你需要看这些书
    DMZ主机实现
    inotify+rsync实现文件即使备份
  • 原文地址:https://www.cnblogs.com/yaowen/p/6976961.html
Copyright © 2011-2022 走看看