本文介绍了创建计算属性?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试通过下拉列表更改文本的字体大小,并且在大多数情况下,它可以像我想要的那样工作.虽然,有没有更好的方法来做到这一点,比如使用计算或观察者?不确定我将如何执行?

这是一支工作笔:https://codepen.io/anon/pen/xoMXPB?editors=1011如何更改第 6 行的逻辑以将其替换为计算或观察者?

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

</v-容器></v-app>

新的 Vue({el: '#app',数据() {返回 {项目: ['大的','中等的','小的',],我的字体:空,};},})

感谢任何帮助.

解决方案

正如您所说,计算属性(或在本例中为方法)可以帮助您 - 主要是压缩代码并使其更加灵活;

方法:{计算字体大小:函数(大小){开关(大小){案例大":返回24px";案例中":返回18px";默认:返回14px";}}}
<p :style="calculateFontSize(myFont)"></p>

I am trying to change the font-size of text through a dropdown and for the most part it is working like i wanted. Although, is there a better way to do it like using a computed or watcher? Not sure how i would execute that?

this is a working pen: https://codepen.io/anon/pen/xoMXPB?editors=1011How can i change logic on line 6 to replace it with a computed or watcher?

<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,
        };
    },
})

Any help is appreciated.

解决方案

As you say, a computed property (or in this case a method) could help you here - largely just condensing the code and making it a little more flexible;

methods: {
  calculateFontSize: function(size){
   switch(size){
    case "LARGE":
      return "24px";
    case "MEDIUM":
      return "18px";
    default:
      return "14px";
   }
  }
}
<p :style="calculateFontSize(myFont)"></p>

这篇关于创建计算属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-27 21:46
查看更多