<!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>

vue9 计算属性 computed的更多相关文章

  1. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. vue从入门到进阶：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  3. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  4. vue2.0中的watch和计算属性computed

    watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...

  5. Vue教程：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  6. vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层

    有时候需要侦听某个对象具体的属性,可以按下面案例进行: <template> <div> <input type="text" v-model=&qu ...

  7. 007——VUE中非常使用的计算属性computed实例

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

  8. 计算属性 computed

    计算属性 computed 计算缓存 vs Methods <div id="example"> <p>Original message: "{{ ...

  9. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

随机推荐

  1. centos7.3安装php7.0

    需求:在Centos7.3下搭建LNMP环境 文章转载自:http://blog.csdn.net/wszll_alex/article/details/76285324 作者:狂热森林 . 关闭防火 ...

  2. 【codeforces 404D】Minesweeper 1D

    [题目链接]:http://codeforces.com/problemset/problem/404/D [题意] 让你玩一个1维的扫雷游戏; 游戏的描述由数字0..2以及符号*表示; 分别表示这个 ...

  3. ASP.NET-使用事件监视诊断程序异常

    用windows自带的事件监视程序来监视网站的异常 来自为知笔记(Wiz)

  4. 如何将visual studio 2010编辑模式改为插入？？？

    按一下键盘上的 insert button 反之亦然

  5. POJ - 3321 Apple Tree (线段树 + 建树 + 思维转换)

    id=10486" target="_blank" style="color:blue; text-decoration:none">POJ - ...

  6. android openGL ES2 一切从绘制纹理開始

    纹理.在openGL中,能够理解为载入到显卡显存中的图片.Android设备在2.2開始支持openGL ES2.0.从前都是ES1.0 和 ES1.1的版本号.简单来说,openGL ES是为了嵌入 ...

  7. HDU 5274(LCA + 线段树）

    Dylans loves tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  8. TYVJ 1340 折半暴搜+二分

    思路: 1. 这 题 不卡常过不去啊-- (先加一个random_shuffle) 首先 我们可以折半 搜这一半可以到达的重量 sort一遍 然后搜另一半 对于路程中每一个解 我们可以二分前一半中加这 ...

  9. ajax中Post和Get请求方式的区别？

    ajax中Post和Get请求方式的区别: 1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示. 2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的 ...

  10. <Sicily>Polynomial

    一.题目描述 Given a polynomial and the value of the variable x, you task is to calculate the value of the ...