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 方法。