我可以在 vuejs 中单击更改字体吗？答案

【问题标题】：can i change my font on a click in vuejs?我可以在 vuejs 中单击更改字体吗？
【发布时间】：2019-12-24 06:39:53
【问题描述】：

我将 Vuejs 与 vuetify 组件一起使用，我已将我的网站自定义为具有国际化 (i18n) 的两种语言。问题是当我更改为我的第二语言时我也想更改我的字体但不知道该怎么做。

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>

任何人都可以在这种情况下帮助我谢谢大家

【问题讨论】：

:style="(entry.language == 'special_font_language') ? 'font-family:b nazanin' : ''"

标签： vue.js font-family

【解决方案1】：

您可以通过样式绑定来做到这一点。

HTML 模板：

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

脚本：

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

【讨论】：

非常感谢您的帮助，我也可以在其他组件中使用 :style="styles" 吗？
这是一个“数据”属性，因此仅限于当前组件/实例。如果你想在多个组件中使用styles，那么你可以创建 Mixins。 Mixins 是 Vue.js 中的一项功能，用于在全局范围内定义公共事物。如果您不知道如何使用 Mixins，请告诉我，我会告诉您。
我创建了一个 lanmixins,js 文件，其中包含我的方法和我的数据，我已经将它导入到我的组件中并像 mixins 一样添加它：[lanmixins] 所以现在我想我可以使用 :style=我的其他标签也有“样式”，但似乎我错了

【解决方案2】：

您可以使用动态样式或动态类，它们可能取决于代码中的某些变量。例如，请参见此处：
https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

例如，您可以编写两个类，然后是这样的：

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

【讨论】：