计算属性（computed property）

HTML页面上的类似{{userName}}这样的，就是模板语法，这里面除了显示某个字段以外，也可以使用JavaScript表达式，例如：

结果：{{ eduBg < 99 && eduBg > 0 ? "通过":"未通过" }}

但是Vue是不建议在模板语法中写太多逻辑的，后期维护是问题。

采用计算属性来处理复杂逻辑是Vue推荐的。

<template>
    <div class="applicant">
        姓名：<input type="text" v-model="userName" required>
        学历：<select v-model="eduBg">
            <option v-for="option in eduBgs" v-bind:value="option.value" required>
                {{ option.text }}
            </option>
        </select>
        <button v-bind:disabled="!canSubmit" @click="submit">提交</button>
    </div>
</template>
<script lang='ts' setup name='Applicant'>
import { ref, computed } from 'vue';
let eduBgs = [{ value: 0, text: "请选择" }, { value: 1, text: "博士" }, { value: 2, text: "硕士" }, { value: 3, text: "本科" }, { value: 99, text: "大专" }]

let userName = ref("");
let eduBg = ref(0);

//计算属性
let canSubmit = computed(() => {
    return checkCanSubmit()
})

function checkCanSubmit() {
    return eduBg.value > 0 && userName.value.length > 0
}

function submit() {
    let eduBgText = eduBgs.find(item => item.value === eduBg.value)?.text
    alert(userName.value + " 先生/女士，学历：" + eduBgText + " 已提交")
}
</script>
<style>
.applicant {
    background-color: cornsilk;
    font-size: small;
    color: black;
    padding: 10px 10px 10px 10px;
}

input,
select,
button {
    margin-bottom: 10px;
}

button:disabled {
    background-color: #ccc;
    /* 当按钮被禁用时改变其背景颜色 */
    cursor: not-allowed;
    /* 改变鼠标悬停时的光标样式 */
}
</style>

canSubmit就是计算属性。当其依赖的userName、eduBg发生改变时，canSubmit也会重新计算并更新。

其实计算属性，逻辑也可以写在function中，模板直接调用即可，也能达到相同的效果。

但是相比计算属性，直接用方法是没有缓存的。

假设页面有三处用到canSubmit，如果用function，会计算3次，如果用计算属性，只需1次。

可修改的计算属性

按照上面的写法，如果我们想直接修改计算属性，例如：

canSubmit.value=true

是不行的，会报此属性是只读的。可读可写的写法：

<button @click="forceSubmit">强制默认提交</button>

// 计算属性 可读可写
let canSubmit = computed({
    get() {
        return checkCanSubmit()
    },
    set(newVal) {
        userName.value = "佚名"
        eduBg.value = 99
    }
})

function forceSubmit() {
    canSubmit.value = true
}