创建计算属性？

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>

​