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>
  • 相关阅读:
    log4j2分析总结(一)
    Idea(三)常用插件以及快捷键总结
    设计模式(七)_模板方法模式
    Idea(二) 解决IDEA卡顿问题及相关基本配置
    设计模式(六)_观察者模式
    SpringBoot(十一)_springboot热部署
    UML类图学习
    设计模式(五)_工厂方法模式
    设计模式(四)_简单工厂模式
    设计模式(三)_装饰器模式
  • 原文地址:https://www.cnblogs.com/yaowen/p/6976961.html
Copyright © 2011-2022 走看看