<!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. laravel 5.5 项目报错

    报错内容: ErrorException (E_WARNING) Declaration of App\Observers\SiteObserver::updated($site) should be ...

  2. [转载]PyCharm创建.py自动添加文件头注释

    转自:https://blog.csdn.net/qq_36482772/article/details/67218214 创建.py文件时 顺便自动添加作者.时间.文件名信息…… mac系统打开编辑 ...

  3. PHP中使用DOM读取解析XML属性值一例

    先看XML文件结构,与常见的文件略有不同,数据并不是用闭合标签保存的,而是直接保存在属性值中. <?xml version="1.0" encoding="utf- ...

  4. canvas 连线曲线图封装

    $.fn.hChart=function (opt) { var setting=$.extend({ className:'', data:[] },opt); var tbody=this; va ...

  5. XXXfragment that is not a fragment错误，fragment认不出来

    要注意的是fragment事实上是有两个版本号的,一个是 import android.support.v4.app.Fragment; 另外一个是 import android.app.Fragme ...

  6. less09 判断语句

    less //.mixin (@a) when (lightness(@a) >= 50%) { //255/2=127.5 // background-color: black; //} // ...

  7. lightoj--1214--Large Division（大数取余）

    Large Division Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %lld & %llu Submit ...

  8. []HAOI2008] 硬币购物 解题报告 ( 完全背包+容斥原理)

    题目链接:https://www.luogu.org/problemnew/show/P1450 题目描述: 题解: 如果去掉限制的话,这就是一个完全背包. 我们可以考虑先去掉限制,把这个完全背包做出 ...

  9. 索引-mysql索引创建、查看、删除及使用示例

    mysql索引创建.查看.删除及使用示例 1.创建索引: ALTER TABLE用来创建普通索引.UNIQUE索引或PRIMARY KEY索引. ALTER TABLE table_name ADD ...

  10. java 类和对象10

    创建一个Point类,有成员变量x,y,方法getX(),setX(),还有一个构造方法初始化x和y.创建类主类A来测试它. public class Print { private int x; p ...