Vue计算属性和侦听属性

我不是女神ヾ 2023-06-27 06:23 9阅读 0赞

# （一）计算属性 #

#### 1. 计算属性使用Vue实例的computed选项实现 ####

#### 2. 计算属性的书写格式 ####

computed:{ 
    		计算属性:function(){ 
    			... ...
    			return 计算属性的计算公式
    		}
    	}

#### 3. 计算属性不能是出现在Vue实例data区中的变量 ####

#### 4. 计算属性的含义： ####

当计算属性的依赖变量发生变化时，计算属性会自动重新计算。

#### 5. 计算属性的getter函数与setter函数 ####

computed:{ 
    		计算属性:{ 
    			get:function(){ 
    				//当依赖变量发生变化时触发计算属性的getter函数
    			},
    			set:function(){ 
    				//当为计算属性赋值时触发计算属性的setter函数
    			}
    		}
    	}

#### 6. 在多个Vue实例之间引用计算属性： ####

Vue实例名：计算属性名

##### 案例： #####

1.  计算两个文本框中数值的和
2.  根据圆的半径计算圆的面积
3.  输入姓名，被分解为姓和名。输入姓和名，合成为姓名

<div id="demo" v-cloak>
    		<h4>例一：计算两个文本框中数值的和</h4>
    		<p>第一个数：<input type="text" v-model.number="numA" /></p>
    		<p>第二个数：<input type="text" v-model.number="numB" /></p>
    		<p>计算结果：{ { result}}</p>
    	
    		<h4>例二：根据圆的半径计算圆的面积</h4>
    		<p>圆的半径：<input type="text" v-model.number="radius" /></p>
    		<p>圆的面积：{ { area}}</p>
    
    		<h4>例三：输入姓名，被分解为姓和名。输入姓和名，合成为姓名。</h4>
    		<p>姓名：<input type="text" v-model="name" /></p>
    		<p>
    			姓：<input type="text" size="6" v-model="familyname" />
    			名：<input type="text" size="6" v-model="lastname" />
    		</p>
    	</div>

new Vue({ 
    	el:'#demo',
    	data:{ 
    		numA:'',
    		numB:'',
    		radius:'',
    		familyname:'',
    		lastname:''
    	},
    	methods:{ 
    
    	},	
    	computed:{ 
    		result:{ 
    			get:function(){ 
    				return this.numA + this.numB
    			},
    			set:function(){ 
    
    			}
    		},
    		area:function(){ 
    			return Math.PI*Math.pow(this.radius,2);
    		},
    		name:{ 
    			get:function(){ 
    				return this.familyname + this.lastname
    			},
    			set:function(newName){ 
    				this.familyname = newName==''?'':newName.charAt(0);
    				this.lastname = newName==''?'':newName.slice(1);
    			}
    		}
    		
    	}
    })

1.  电费计算器。（第一个Vue实例计算两次电表数的差，第二个Vue实例计算电费）

<div id="ammeter1">
    		<p><input type="text" placeholder="上月用电量" v-model="lastMounth" /></p>
    		<p><input type="text" placeholder="本月用电量" v-model="thisMounth" /></p>
    		<p>两月电表差值：{ { result}}</p>
    	</div>
    	<div id="ammeter2">
    		<p><input type="radio" v-model="dian" value="1" />商业用电（1.0元/度）</p>
    		<p><input type="radio" v-model="dian" value="0.52" />民用用电（0.52元/度）</p>
    		<p>应缴纳电费：{ { resultAll}}</p>
    	</div>

var ammeter1 = new Vue({ 
    	el:'#ammeter1',
    	data:{ 
    		lastMounth:'',
    		thisMounth:''
    	},
    	methods:{ 
    
    	},
    	computed:{ 
    		result:function(){ 
    			return this.thisMounth-this.lastMounth
    		}
    	}
    })
    var ammeter2 = new Vue({ 
    	el:'#ammeter2',
    	data:{ 
    		dian:'0.52'
    	},
    	methods:{ 
    
    	},
    	computed:{ 
    		resultAll:{ 
    			get:function(){ 
    				return ammeter1.result*this.dian
    			},
    			set:function(){ 
    
    			}
    		}
    	}
    })

1.  模拟购物车

<div id="car">
    		<h4>我的购物车>></h4><hr />
    		<template v-if="product.length!=0">
    			<table>
    				<thead>
    					<tr>
    						<th><input type="checkbox" v-model="checkedAll" @click="checkAll" />全选</th>
    						<th>序号</th>
    						<th>品牌</th>
    						<th>品名</th>
    						<th>单价</th>
    						<th>数量</th>
    						<th>合计</th>
    						<th>操作</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr v-for="(item,index) in product">
    						<td><input type="checkbox" v-model="selected" :value="item.id" /></td>
    						<td>{ { index+1}}</td>
    						<td>{ { item.brand}}</td>
    						<td>{ { item.name}}</td>
    						<td>{ { item.price}}元</td>
    						<td>
    							<button @click="item.count--" :disabled="item.count===1">-</button>
    							{ { item.count}}
    							<button @click="item.count++">+</button>
    						</td>
    						<td>{ { item.count*item.price}}元</td>
    						<td><button @click="DeleteFn(index)">删除</button></td>
    					</tr>
    				</tbody>
    			</table>
    			<div>总价：{ { all}}元</div>
    		</template>
    		<template v-else>
    			<p>您的购物车空空如也，请到主页逛一逛</p>
    		</template>
    	</div>

#car{ 
    	width: 1200px;
    	margin: 0 auto;
    }
    #car table{ 
    	width: 100%;
    	height: auto;
    	border-collapse: collapse;
    }
    #car table tr td,
    #car table tr th{ 
    	border-bottom: 1px solid #aaa;
    	text-align: center;	
    }
    #car table tr th{ 
    	height: 50px;
    }
    #car table tr td{ 
    	height: 80px;
    }

# （二）侦听属性 #

#### 1. 侦听属性使用Vue实例的watch选项实现。 ####

#### 2. 侦听属性的书写格式： ####

###### 格式一：书写在Vue实例内部： ######

watch:{ 
    	被侦听的变量:function(newValue,oldValue){ 
          ... ...
      }
    }

> 侦听函数的参数：  
> **newValue** 表示被侦听的变量变化后的取值。  
> **oldValue** 表示被侦听的变量变化前的取值。

###### 格式二：书写在Vue实例外部，利用Vue实例的$watch()方法实现： ######

vm.$watch('被侦听的变量',function(newValue,oldValue){ 
    	... ...
    },{ 
    	immediate:true/false,
    	deep:true/false
    })

#### 3. 侦听属性必须是出现在Vue实例data区中的变量 ####

#### 4. 侦听属性的含义 ####

当被侦听的变量发生变化时，执行侦听属性所对应的函数

#### 5. 侦听属性的高级选项 ####

*  **immediate**：设置侦听属性对应的函数是否在Vue实例创建时立即执行。默认值  
    为false，表示默认情况下不立即执行。
 *  **deep**：设置侦听属性是否采用深度侦听模式，即是否希望侦听一个对象类型的变量  
    中所有的成员。默认值为false。

**例1**：对一个对象类型的变量进行侦听。当该对象变量中任何一个键名的值发生变化时都  
执行侦听函数。

var obj={ a:10,b:20};
    watch:{ 
    	obj:{ 
    		handler:function(newValue,oldValue){  … },
    		deep:true
    	}
    }

**例2**：若真希望侦听obj对象中的a成员，不希望侦听obj对象的b成员。

watch:{ 
    	'obj.b':function(newValue,oldValue){  … }
    }

> 结论：若只侦听对象数据中的某一个成员，则该成员名必须用引号引住

##### 案例： #####

1.  计算任意整数的阶乘。（公式：n!=1*2*3\*…\*n）

<h4>案例一：阶乘计算器</h4>
    	<div id="factorial">
    		<input type="number" min="1" step="1" placeholder="请输入整数" v-model="sum" />
    		<p>概数的阶乘：{ { result}}</p>
    	</div>

1.  货币单位兑换（美元与人民币）。

var unit = new Vue({ 
    	el:'#unit',
    	data:{ 
    		china:1,
    		dollar:1,
    		rate:7.0119
    	}
    })
    unit.$watch('china',function(newValue){ 
    	this.dollar = this.china/this.rate;
    })
    unit.$watch('dollar',function(newValue){ 
    	this.china = this.dollar*this.rate;
    },{ 
    	immediate:true
    })

1.  颜色拾取器。

#box{ 
    	width:150px;
    	height: 150px;
    	border: 1px solid #ccc;
    }