zoukankan      html  css  js  c++  java
  • vue计算属性与监听器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性与监听器</title>
        <script src="Vue.js"></script>
    </head>
    <body>
    <div id="root">
        姓:<input v-model="firstName"/>
        名:<input v-model="lastName"/>
        <div>{{Name}}</div>
        <div>{{count}}</div>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:"",
                lastName:"",
                count:0
            },
            <!--computed比较适合对多个变量或者对象进行处理后返回一个结果值,
            也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,
            举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。
            这里的这个总金额使用computed属性来进行计算是最好的选择-->
            computed:{
                Name:function () {
                    return this.firstName+this.lastName;
                }
            },
            <!--watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象-->
            watch:{
                /*firstName:function () {
                    this.count++;
                },
                lastName: function()
                {
                    this.count++;
                }*/
                Name:function () {
                    this.count++;
                }
            }
    
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    android 入门-ID
    Win10 VS2015 社区版切换到VS2013社区版 进行维护之前的项目
    Win10 AppBar
    Win10 保存Element到相册
    LRUCache c#
    Winform解决界面重绘闪烁的问题
    使用Emit实现给实体赋值
    Winform 自定义窗体皮肤组件
    WPF 分享一种背景动画效果
    使用MEF与Castle实现AOP
  • 原文地址:https://www.cnblogs.com/topsyuan/p/11706383.html
Copyright © 2011-2022 走看看