计算属性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> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现