Создание вычисляемого свойства?

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

Как насчет использования массива объектов в качестве опций для упрощения условного выражения в вычисляемом свойстве.

Обратите внимание на реквизиты item-text и item-value в v-select.Тогда условное выражение можно использовать для простого добавления синтаксиса стиля 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>