创建计算属性？

Question

我正在尝试通过下拉菜单更改文本的字体大小，并且在大多数情况下它可以按我想要的方式工作。虽然，有没有更好的方法来做到这一点，比如使用计算或观察者？不知道我将如何执行？

这是一支工作笔：https://codepen.io/anon/pen/xoMXPB?editors=1011 如何更改第 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,
        };
    },
})

感谢任何帮助。

Answer 1

正如您所说，计算属性（或在本例中为方法）可以在这里为您提供帮助 - 主要只是压缩代码并使其更加灵活；

methods: {
  calculateFontSize: function(size){
   switch(size){
    case "LARGE":
      return "24px";
    case "MEDIUM":
      return "18px";
    default:
      return "14px";
   }
  }
}

<p :style="calculateFontSize(myFont)"></p>

Answer 2

如果使用对象数组作为选项来简化计算属性中的条件。

注意 v-select 中的 item-text 和 item-value 属性。那么条件句就可以简单的添加样式语法font-size: ${this.myFont}px

Vue.config.silent = true;
Vue.use(Vuetify);

new Vue({
  el: '#app',
  data: () => ({
    items: [
      { label: 'Large', value: 24 },
      { label: 'Medium', value: 18 },
      { label: 'Small', value: 16 },
    ],
    myFont: 16
  }),
  computed: {
    style() {
      return `font-size: ${this.myFont}px` ;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css">

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-select :items="items" item-text="label" item-value="value" label="Font-Size" v-model="myFont"></v-select>
      <div>
        <p :style="style">Font is {{myFont}}px</p>
      </div>
    </v-container>
  </v-app>
</div>