[Vuejs]-Adjust font-size using a slider vue

by

0👍

When you get the value you want, save it as a reactive variable in your data object. Now you can use :style as style binding to adjust the font size for each element you want directly:

new Vue({
  el: '#app',
  data: {
    fontSize: 12
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id='app'>
  <input type="range" min="10" max="50" v-model="fontSize">
  <p :style="`font-size: ${fontSize}px`">font size: {{ fontSize }}px</p>
</div>

If you want a more global solution in your component, you can write a new class in the data object and declare it for each element with the adaptive font size.

The offcial documentation got some examples for you.

Leave a comment