本文介绍了创建计算属性?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试通过下拉列表更改文本的字体大小,并且在大多数情况下,它可以像我想要的那样工作.虽然,有没有更好的方法来做到这一点,比如使用计算或观察者?不确定我将如何执行?
这是一支工作笔: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>
这篇关于创建计算属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!