<!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. 版本号比较[versionCompare]

    /*** * 版本号比较 * @param v1 版本号a * @param v2 版本号b * @return -1代表不是合格版本号:0代表一样大.1 代表版本号a大于版本号b.2代表版本号b大于 ...

  2. python学习笔记:第九天

    Linux学习 1.linux虚拟机安装: 1.1win10-64为系统:链接:https://pan.baidu.com/s/1Wz8U1B_OMLaYlYr_SC75Zw 提取码:fe9k ,有U ...

  3. php把数据表导出为Excel表的最简单、最快的方法（不用插件）

    亲测可用,把下面的数据换成自己的即可 <?php header("Content-type:application/vnd.ms-excel");header("C ...

  4. setjmp()和longjmp()函数

    之前我们讲到了过程活动记录(AR),那么如何来操纵AR呢,一个可能的方法是,根据局部变量的地址进行推算,例如对于上面的a函数,执行a函数时的当前AR地址就是参数i的地址偏移8个字节,也就是 ((cha ...

  5. UVA 11020 Efficient Solutions+multiset的应用

    题目链接:点击进入 首先来讲,非常easy看到我们事实上仅仅要维护优势人群的集合:假设增加一个新的人,我们首先看一下优势人群中是否有人会让这个人失去优势,假设没有,则将这个人插入集合中.但要注意到这个 ...

  6. Android Studio生成apk

    1.菜单Build->Generate Signed APK 2.生成android.keystore,能够依据弹框去Create new一个,也可使用命令来生成android.keystore ...

  7. pandas groupby 分组操作

    最一般化的groupby 方法是apply. tips=pd.read_csv('tips.csv') tips[:5] 新生成一列 tips['tip_pct']=tips['tip']/tips[ ...

  8. Metasploit的攻击实例讲解----辅助扫描工具

    不多说,直接上干货! 怎么弹出来这个呢,连续按两次tab. msf > use auxiliary/scanner/ Display all possibilities? (y or n) us ...

  9. HBase框架基础（四）

    * HBase框架基础(四) 上一节我们介绍了如何使用HBase搞一些MapReduce小程序,其主要作用呢是可以做一些数据清洗和分析或者导入数据的工作,这一节我们来介绍如何使用HBase与其他框架进 ...

  10. ScrollView嵌套GridView不显示顶部

    /*     * scrollView中嵌套GridView不能显示头部     *      * 方案①:scrollView.smoothScrollTo(0, 0);     *      * ...