美文网首页
数据侦听

数据侦听

作者: 九尾的日志 | 来源:发表于2018-08-19 02:15 被阅读0次

Computed侦听多个数据变化,Watch只能侦听data里单个数据变化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数据侦听</title>
        <script src="vue.js"></script>
    </head>
    <body>
        
        <!-- 监控购物车数据变化 -->
        
        <div id="app">
             
            <input type="number" v-model="price" />
            
            <input type="number" v-model="number" />
            
            <p>{{'总计:'+total}}</p> 
            
        </div>
        
        
        <!-- computed侦听多个数据变化,watch只能侦听data里单个数据变化 -->
        
        <script>
            
            var vm = new Vue({
                
                el:'#app',
                
                data:{
                    price:18,
                    number:6
                },
                
                computed:{
                    
                    total:function(){
                        
                        return this.price*this.number
                    }
                },
                
                watch:{
                    
                    price:function(val,oldval){
                        
                        console.log(val)
                    }
                }
            })
            
            
        </script>
        
    </body>
</html>

相关文章

  • 数据侦听

    Computed侦听多个数据变化,Watch只能侦听data里单个数据变化

  • vue侦测数据变化

    如何使用watch侦听数据变化?如何通过计算属性computed配合watch属性来侦听数据变化?深度侦听与单一属...

  • 24.compositionApi的watchEffect和re

    侦听数据的变化 在前面的Options API中,我们可以通过watch选项来侦听data或者props的数据变化...

  • [vue3进阶] 1.侦听器watch的进阶用法

    我们之前学习过侦听器watch,它用来侦听数据变化,让我们可以在数据变化以后,做一些操作,比如向后台请求数据等。这...

  • Vue3:Watch 监听器

    1、什么是 watch 侦听器 watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。例如,...

  • vue2 vue3 侦听器watch

    1.什么是watch的侦听器 watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。例如:监视...

  • Vue的watch API

    watch API 完全等同于组件侦听器 property watch 需要侦听特定的数据源,并在回调函数中执行副...

  • ViewModel原理解析

    ViewModel ViewModels负责为View准备数据。它们将数据公开给正在侦听更改的任何视图ViewMo...

  • Egret事件机制

    事件的流程 Egret事件机制包含四个步骤:注册侦听器,发送事件,侦听事件,移除侦听器。且是按顺序执行。 注册侦听...

  • Form表单里使用侦听器计算立方数

    使用侦听器 在表单里的数据代码 eg 计算属性计算对象里的值

网友评论

      本文标题:数据侦听

      本文链接:https://www.haomeiwen.com/subject/pwcqiftx.html