提出问题

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

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

解决

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

代码

引入 vue：

<script src="js/vue.js"></script>

html：

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

js：

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',//选择器: id 样式、元素选择器等  但元素选择器不能绑定body html元素
        data:{
            score:90
        },
        computed:{
            // 计算属性
            ping:{ //声明计算属性
                get:function(){ // 提供getter函数
                    var ret = ""
                    if(this.score >= 90){
                        ret = "优"
                    }else if(this.score >= 80){
                        ret = "良"
                    }else if(this.score >= 70){
                        ret = "中"
                    }else if(this.score >= 60){
                        ret = "差"
                    }else if(this.score == ""){ // 当输入框的内容为空时，评价显示为空字符串
                        ret = ""
                    }
                    else{
                        ret = "不及格"
                    }

                    return ret
                }
            }
        }
   });
</script>

小结

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

计算属性 缓存结果

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

代码

关键：显示4次评价结果

html代码

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

js代码

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',//选择器: id 样式、元素选择器等  但元素选择器不能绑定body html元素
        data:{
            score:90
        },
        computed:{
            // 计算属性
            ping:{ //声明计算属性
                get:function(){ // 提供getter函数
                    var ret = ""
                    if(this.score >= 90){
                        ret = "优"
                    }else if(this.score >= 80){
                        ret = "良"
                    }else if(this.score >= 70){
                        ret = "中"
                    }else if(this.score >= 60){
                        ret = "差"
                    }else if(this.score == ""){ // 当输入框的内容为空时，评价显示为空字符串
                        ret = ""
                    }
                    else{
                        ret = "不及格"
                    }
                    console.log("score：",this.score)
                    return ret
                }
            }
        }
   });
</script>

执行结果

只打印一次 score： 80

计算属性的简写

当计算属性只是用于 读取、显示，不需要 修改，可以使用下面简写形式：

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            score:90
        },
        computed:{
            //简化写法：定义计算属性，并提供getter函数
            ping:function(){ 
                var ret = ""
                if(this.score >= 90){
                    ret = "优"
                }else if(this.score >= 80){
                    ret = "良"
                }else if(this.score >= 70){
                    ret = "中"
                }else if(this.score >= 60){
                    ret = "差"
                }else if(this.score == ""){ // 当输入框的内容为空时，评价显示为空字符串
                    ret = ""
                }
                else{
                    ret = "不及格"
                }

                return ret
            }
        }
   });
</script>

计算属性的 setter 函数

计算属性默认只有 getter，需要时也可以提供一个 setter，见 官网

代码

html：

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

js：

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            score:90
        },
        computed:{
            ping:{ //声明计算属性 ping
                get:function(){ // 定义getter函数
                    var ret = ""
                    if(this.score >= 90){
                        ret = "优"
                    }else if(this.score >= 80){
                        ret = "良"
                    }else if(this.score >= 70){
                        ret = "中"
                    }else if(this.score >= 60){
                        ret = "差"
                    }else if(this.score == ""){ // 当输入框的内容为空时，评价显示为空字符串
                        ret = ""
                    }
                    else{
                        ret = "不及格"
                    }

                    return ret
                },
                set:function(newValue){ // 定义setter函数
                    console.log("执行 set 函数，newValue:",newValue)
                }
            }
        }
   });
</script>

测试

在浏览器控制台执行下面代码：

vm.ping = '良'

就会执行计算属性 ping 的 set 方法，执行结果如下：

执行 set 函数，newValue: 良

原文出处：/show_1IX6lgNBvrSP.html