CODEWITHSUNDEEP
vue.jsfont-family
t.khatibi
t.khatibi

Reputation: 115

can i change my font on a click in vuejs?

I am using Vuejs with vuetify components i have customize my website to have two languages with Internationalization (i18n). the problem is i also want to change my font when i change to my second language bur don't know how to do that.

style
.font{
        font-family: 'b nazanin'; 
 /*i want to use this font after i change my language*/
    }

<template>
<button  v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)"v-on:click="font">
                    <flag :iso="entry.flag" ></flag>
                    {{entry.title}}
                </button>


<h1  v-bind:style="{font}">{{ $t('titleInHome') }}</h1>
</template>

can anyone please help me in this case thank you all

Upvotes: 2

Views: 2870

Answers (2)

Michael
Michael

Reputation: 5048

You can use a dynamic style or a dynamic class, these can depend on some variable inside your code. See here for example:
https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

For example you could write two classes and then something like this:

:class="{'classOne': languageA: ,  'classTwo': languageB}" //(languageA and B would be bools in this case)

Upvotes: 0

Hardik Raval
Hardik Raval

Reputation: 3651

You can do it with style binding.

HTML Template:

<html>
  <body>
    <div id="app">
      <h1 :style="styles">Apply font here</h1> <br>
      <button  v-for="entry in langs" @click="changeFont(entry.title)" :key="entry.title">
        {{ entry.title }}
      </button>
    </div>
  </body>
</html>

Script:

new Vue({
  el:"#app",
  data:{
    styleObj:{
      color :'blue',
      border: '2px blue dotted',
      backgroundColor:'gray',
      fontFamily:'Time New Roman'
    },
    langs:[
      { title :'Vue.js'},
      { title:'React'},
      { title:'Angular'}
    ]
  },
  methods:{
    changeFont(lang){
      let fontFamily = null; 
      if(lang == "Vue.js"){
         fontFamily = "Arial";
       }
      else if(lang == "React"){
        fontFamily = "Verdana";
      }
      else{
        fontFamily = "Calibri";
      }
      this.styleObj.fontFamily = fontFamily;
    }
  }
});

Complete Example

Upvotes: 3

Related Questions