HBuilder X 中Vue.js基础使用-＞计算属性的应用（三）

 一、通过简单的计算属性：对两数进行加法，减法，乘法，除法运算

<template>
	<div>
		  <h1>computed 计算属性</h1>
		  <el-input type="text" v-model="numOne" /> +
		  <el-input type="text" v-model="numTwo" />=
		  <el-input type="text" v-model="resultAdd" />
		  <p/>
		  <el-input type="text" v-model="numOne" /> -
		  <el-input type="text" v-model="numTwo" />=
		  <el-input type="text" v-model="resultSub" />
		  <p/>
		  <el-input type="text" v-model="numOne" /> *
		  <el-input type="text" v-model="numTwo" />=
		  <el-input type="text" v-model="resultMul" />
		  <p/>
		  <el-input type="text" v-model="numOne" /> /
		  <el-input type="text" v-model="numTwo" />=
		  <el-input type="text" v-model="resultDiv" />
		  <p/>
	</div>
</template>


<style>
	.el-input{
		width: 150px;
	}
</style>

二、直接修改计算属性的值会发生错误

	 //修改属性结果值
	 function updateAtr(){
		  console.log(100)
		  resultAdd.value=100;
	 }

原因： 如果传递给 computed 的是一个函数，那么这就是一个 getter 函数，我们只能获取它的值，而不能直接修改它。

需要修改计算属性的值，我们需要怎么操作呢？其实很简单，只需要传进去一个对象。

	 // 计算属性求和
	 const resultAdd2=computed({
	 		 get: () =>{
	 			return Number(all.numOne)+Number(all.numTwo) 
	 		 },
	 		 set: (value) => {
	 			  console.log(value)
	 			  return all.numTwo = Number(value) + 1
	 		 }
	 });
	 
	 
	 function updateAtr(){
	 		 resultAdd2.value=100;
	 }
	 

 单击按钮，把 numTwo 改成输入的数字100 + 1，也就是101。

 

1.  vue.3.0 中用于从vue 按需导入 computed 计算属性。
2. 如果传入的是一个getter 函数， 返回一个只读计算属性。
3. 使用ref ，reactive 创建一个响应式对象，  直接渲染使用。
4. 可以获取值， 也可以修改值， computed 计算属性中传入一个对象。 get 方法 和 set 方法。