[Vue.js] Font Size Larger or Smaller

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.


<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>

  <div v-bind:style="{ fontSize: fontSize + 'rem' }">
    Main content of website

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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.


'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


[1][JavaScript] Font Size Larger/Smaller