计算属性computed和侦听watch(2)--vue计划

1.计算属性ComPuted,1.为了处理复杂的计算逻辑而使用,比methods方法更轻便,快捷,特殊处理缓存使用更佳,methods比较消耗内存,相对而言. 2. 解决业务代码在标签里处理的问题.

       *** 特别注意,计算时的属性不能再data里初始化,如data:{totalPrice:’’},computed: {totalPrice:function(){}},这样是不允许的,只能在computed里创建.

**计算属性练习1 : 

苹果手机价格单价input

数量input v-model:

华为手机价格单价input 

数量input v-model

小米手机价格单价input 

        数量input v-model

总价: 一般做法写一个div,里面进行逻辑操作,price1*num1 + price2 *num2

<div>属性计算:{{totalPrice}}</div>

computed: {

  totalPrice: function() {

    let {price1,num1,price2,num2,price3,num3} = this

    return price1*num1 + price2 *num2 

           }

}

** methods也可以用这个方法计算,官方推荐计算,因为依赖缓存用计算,methods会影响性能,因为要重复调用,执行才去改变

 

2.watch 侦听器属性,一个属性的改变影响着多个属性会使用到watch侦听

*** watch可以看作是methods和computed的结合体

pageInfo : {

 page: 1,

 str: ‘’

}

// 可以在检查里调用 app来改变它们的值 ,app是绑定的id,取出所有实例属性

// 一个数据影响多个数据会用到watch,多个受依赖的数据的改变而影响的”受影响”的数据

watch: {

   // 侦听单个字符

  price1: function(newValue,oldValue) {

console.log(‘watch——>’, newValue,oldValue)

  }

  // 侦听整个对象

  pageInfo: {

    handler: function(newValue,oldValue) {

     // 哪个值改变,显示哪个数据变化

      console.log(‘watch appleInfo———’,newValue,oldValue)

    },

    deep: true, // true,false深度监听还是普通监听

    immediate: true // true/false,是否以当前的初始值执行handler函数

  }

}

3.代码如下,下面vue是通过npm安装vue的方式导入的

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        苹果手机价格:<input v-model="price1"></input>
        数量:<input v-model="num1"></input>
    </div>
    <div>
        华为手机价格:<input v-model="price2"></input>
        数量:<input v-model="num2"></input>
    </div>
    <div>
        小米手机价格:<input v-model="price3"></input>
        数量:<input v-model="num3"></input>
    </div>
    <div>总价: {{ total }}
    </div>
    <div>直接计算: {{ price1 *num1 + price2* num2 + price3*num3}}</div>
 
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            price1: '',
            num1: 0,
            price2: '',
            num2: 0,
            price3: '',
            num3: 0,
            priceInfo: {
                price: '',
                num: 0
            }
        },
        computed: {
            total: function() {
                let {price1,num1,price2,num2,price3,num3} = this
                return price1 * num1 + price2 * num2 + price3 * num3
            }
        },
        methods() { // 写方法用的
        },
        watch: {
            // 侦听单个属性,可以直接在检查里输入挂载的id,app来改变price1的信息或输入改变
            price1: function(newValue, oldValue) {
                console.log('watch---------->',newValue, oldValue)
            },
            // 也可以侦听整个对象
            priceInfo: {
                // 侦听对象用到handler方法
                handler:function(newValue, oldValue) {
                    console.log('watch appleInfo———---------->',newValue, oldValue)
 
                },
                deep: true, // 深度侦听与普通侦听,如果为true时,会侦听详情信息,并打印handler中的信息,false则不会打印handler信息
                immediate: true // true/false,是否以当前的初始值执行handler函数,为true时打印的是初始化的信息
            }
        }
    })
</script>
     
</body>
</html>

　　

 

posted @   TheYouth  阅读(191)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae