Javascript 创建计算属性？

我正试图通过一个下拉菜单来改变文本的字体大小，在大多数情况下，它都是我想要的。尽管如此，有没有更好的方法来实现这一点，比如使用计算机或监视程序？不知道我会怎么做

这是一支工作笔： 如何更改第6行上的逻辑以替换为计算或观察程序

<div id="app">
    <v-app id="inspire">
        <v-container>
            <v-select :items="items" label="Font-Size" v-model="myFont">
            </v-select>
            <div>
                <p :style="{'font-size': myFont == 'Large' ? 24 + 'px' : myFont == 
     'Medium' ? 18 + 'px' : 14 + 'px'}">Large="24px", Small="16px",
                    Medium="18px"</p>
            </div>
        </v-container>
    </v-app>
</div>


new Vue({
    el: '#app',
    data() {
        return {
            items: [
                'Large',
                'Medium',
                'Small',
            ],
            myFont: null,
        };
    },
})

Large=“24px”，Small=“16px”，
中等=“18px”

新Vue({
el:“#应用程序”，
数据（）{
返回{
项目：[
“大”，
“中等”，
"小",，
],
myFont:null，
};
},
})

---

非常感谢您的帮助。

正如您所说，一个计算属性（或者在本例中是一个方法）可以在这里帮助您—主要是压缩代码并使其更加灵活

方法：{
calculateFontSize:函数（大小）{
开关（尺寸）{
案例“大”：
返回“24px”；
案例“中等”：
返回“18px”；
违约：
返回“14px”；
}
}
}

---

使用对象数组作为选项来简化computed属性中的条件，怎么样

注意v-select中的

项目文本

和

项目值

道具。然后，可以使用条件简单地添加样式语法

font size:${this.myFont}px

Vue.config.silent=true；
Vue.use（Vuetify）；
新Vue({
el:“#应用程序”，
数据：（）=>({
项目：[
{标签：'Large'，值：24}，
{标签：'Medium'，值：18}，
{标签：'Small'，值：16}，
],
myFont:16
}),
计算：{
样式（）{
返回`font size:${this.myFont}px`；
}
}
})

字体是{{myFont}}px

我喜欢这种方式（因为我正试图这样做），但它给了我一条错误消息，告诉我calculateFontSize不是一个函数我的错，像这样使用Parma，最好将它作为一种方法创建。完全相同的代码，只需将计算更改为方法。查看我的更新代码。删除错误，但大小现在不会更改！！很奇怪。我是否可以确认html部分看起来像

？我知道我做错了什么。成功了。非常感谢。接受它作为答案我可以建议在你的代码片段中禁用控制台吗？即使在扩展的代码段中，也很难看到结果。