12
[Vue.js] Font Size Larger or Smaller
source link: http://siongui.github.io/2018/05/18/vuejs-font-size-larger-or-smaller/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
[Vue.js] Font Size Larger or Smaller
May 18, 2018
See demo first. Click the buttons and you will see font size becomes larger/smaller.
Main content of website
The following is source code for the demo.
HTML:
<div id="vueapp">
<button v-on:click="fontSize += 0.25">A+</button>
<button v-on:click="fontSize < 0.5? fontSize = 0.25: fontSize -= 0.25">A-</button>
<br><br>
<div v-bind:style="{ fontSize: fontSize + 'rem' }">
Main content of website
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
We use fontSize to control the font size inside the div which contains the main content. When users click A+ button, fontSize will increase 0.25. If users click A- button, we will check if fontSize is smaller than 0.5. If yes, the keep the fontSize at 0.25. If no, decrease the fontSize by 0.25.
JavaScript:
'use strict';
new Vue({
el: '#vueapp',
data: {
fontSize: 1.25
}
});
Tested on:
- Chromium 66.0.3359.139 on Ubuntu 18.04 (64-bit)
- Vue.js 2.5.16
References:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK