Trying to adjust the font size of text using a dropdown and so far it's working as expected. However, is there a more efficient way to achieve this, such as using a computed property or watcher? I'm not sure how to go about implementing that.
Here's a link to a pen that I've been working on: https://codepen.io/anon/pen/xoMXPB?editors=1011. How can I modify the logic on line 6 to incorporate a computed property 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 assistance would be greatly appreciated.