提出问题

如下图，当输入分数后，就能自动显示 优、良、中、差、不及格，该如何实现呢？

关键：没有按钮，当输入框的分数改变后，评价自动随之改变

解决

使用 计算属性 就可以解决该问题

代码

html：

<template>
    分数： <input type="text" v-model="score" />
    <br>
    评价： {{ping}}
</template>

js：

<script lang="ts" setup name='Student'>
    // 导入computed
    import { ref,computed } from 'vue'

    let score = ref(80)
    // 计算属性
    let ping = computed(()=>{
        let ret = ''
        if(score.value>=90){
            ret = '优'
        }else if(score.value>=80){
            ret = '良'
        }else if(score.value>=70){
            ret = '中'
        }else if(score.value>=60){
            ret = '差'
        }else{
            ret = '不及格'
        }
        console.log("score：",score.value)
        return ret
    })
</script>

小结

• 当属性值 score 改变时，才会触发执行 计算属性 ping 的 get() 函数

计算属性 缓存结果

计算属性会 缓存结果，如：显示4个评价结果，只执行 1次 函数。可以提高性能

例子

关键：显示4次评价结果

html代码

<div id="app">
    分数： <input type="text" v-model="score" />
    <br>
    评价： {{ping}}
    <br>
    评价： {{ping}}
    <br>
    评价： {{ping}}
    <br>
    评价： {{ping}}
</div>

执行结果

只打印一次 score： 80

修改计算属性

修改计算属性时，给 computed() 传入对象，对象中必须有 get()、set() 函数

代码

html：

<template>
    分数： <input type="text" v-model="score" />
    <br>
    评价： {{ping}}<br>
    <button @click="modify">修改ping</button>
</template>

js：

<script lang="ts" setup name='Student'>
    // 导入computed
    import { ref,computed } from 'vue'

    let score = ref(80)
    // 计算属性
    let ping = computed({
        get(){
            let ret = ''
            if(score.value>=90){
                ret = '优'
            }else if(score.value>=80){
                ret = '良'
            }else if(score.value>=70){
                ret = '中'
            }else if(score.value>=60){
                ret = '差'
            }else{
                ret = '不及格'
            }
            console.log("score：",score.value)
            return ret
        },
        set(newValue){// 参数是ping的新值
            console.log("newValue:",newValue)
            if(newValue === '特优'){
                score.value = 150
            }
        }
    })
    // 按钮事件
    function modify(){
        // 给ping赋值，会触发执行 ping的set() 方法
        ping.value = "特优"
    }
</script>

测试

点击 【修改】按钮，页面中的分数显示 150

执行过程

原文出处：/show_1GW3gPExyowj.html