zoukankan      html  css  js  c++  java
  • computed&&watch

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>if判断</title>
    </head>
    <body>  
        
        <div id="app">
            <span>1-{{name}}</span><br>
            <span>2-{{addName()}}</span><br>
            <span>3-{{addName()}}</span><br>
            <span>4-{{addName2}}</span><br>
            <span>5-{{addName2}}</span><br>
            <span>6-{{time}}</span><br>
            <span>7-{{num}}</span><br>
    
    
        </div>
    
    </body>
    
    <script src="js/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                name:'ddddd',
                num:0
                 
            },
            methods:{  //  方法   每次都会重新计算里面的操作  无缓存
                addName:function(){
                    console.log('addName调用');
                    return "hello" + "-"+this.name;
                    
                }
    
            },
            computed:{   //计算  只有当依赖的数据改变时才重新计算        有缓存   在数据的基础上进行依赖
                // addName2:function(){
                //     console.log('addName2调用!');
                //     return "hello"+ "-"+this.name;   //只有当name值改变时 才从新调用addName方法
                // },
                addName2:{
                    get:function(){
                        console.log('addName2被调用');
                        return "hi"+"-"+this.name;
                    },
                    set:function(name){
                        this.name=name
                    }
                },
                time:function(){
                    console.log('time调用!');
                    return new Date();
                }
            },
            watch:{  //监测   数据改变进行的操作
                name:function(){  //监测 data里的数据改变时  进行的操作 
                    console.log('检测到name发生改变!');
                    this.num=1;   //data里的num  +1
                }
            }
    
        });
    
        this.name='jinsuo'
    
    </script>
    </html>
  • 相关阅读:
    随机抽样一致性算法(RANSAC)
    RANSAC算法详解
    添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
    vue-cli3组件嵌套
    vue-cli3文件的引入
    vue-cli3组件的使用
    vue ui 使用图形化界面
    vue-cli3及以上版本安装及创建项目
    NetTerm共享文件
    Gin框架配置静态文件static
  • 原文地址:https://www.cnblogs.com/jinsuo/p/10497591.html
Copyright © 2011-2022 走看看