<!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. new 一个对象的时候发生了什么

    // 资料一: 摘抄自js高级程序设计(第三版)145页: 要创建Person的新实例,必须使用new操作符.以这种方式调用构造函数实际上会经历以下4个步骤: (1)创建一个新对象: (2)将构造函数 ...

  2. YUM安装MONGODB发生Error in PREIN scriptlet in rpm package mongodb-enterprise-server-4.0.2-1.el6.x86_64错误

    YUM安装MONGODB发生Error in PREIN scriptlet in rpm package mongodb-enterprise-server-4.0.2-1.el6.x86_64错误 ...

  3. linux中对socket的理解 socket高并发

    1.socket是什么? 其实准确的来说,socket并不仅仅用于linux而已,它也应用于TCP/IP中.笼统的来说,socket就是指的“IP地址+端口号”.比如我有一个ssh服务器A,这时候我有 ...

  4. js 判断是否滚动到底部

    $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置 ...

  5. SPOJ 题目705 New Distinct Substrings（后缀数组，求不同的子串个数）

    SUBST1 - New Distinct Substrings no tags  Given a string, we need to find the total number of its di ...

  6. 从设计稿到demo

    前言 先省略产品设计师的wireframe和mockup,为什么线框图和视觉设计稿不在叙述范围内,由于这里要做的是网页重构,从接收设计师的PSD那一刻開始: 一.接到设计稿 1.接收到PSD后.不要着 ...

  7. HD-ACM算法专攻系列（3）——Least Common Multiple

    题目描述: 源码: /**/ #include"iostream" using namespace std; int MinComMultiple(int n, int m) { ...

  8. Spring AOP 实现数据库读写分离

    背景 我们一般应用对数据库而言都是"读多写少",也就说对数据库读取数据的压力比较大,有一个思路就是说采用数据库集群的方案, 其中一个是主库,负责写入数据,我们称之为:写库: 其它都 ...

  9. 4、Go for循环

    package main import "fmt" func main(){ //for 循环是go语言唯一的循环结构,分为三种类型 //第一种 类似while i:=1 for ...

  10. 爬虫--BeautifulSoup使用

    解析库 解析器 使用方法 优势 劣势 Python标准库 BeautifulSoup(markup, "html.parser") Python的内置标准库.执行速度适中 .文档容 ...