修改字体的vue语句

在Vue.js中，你可以使用`v-bind`指令或者简写的`:`来动态地修改元素的字体。这里有一个例子：

<p v-bind:class="{ customFont: isCustom }">这是文本</p>

<style>
.customFont {
  font-family: 'Arial', sans-serif;
}
</style>

<script>
export default {
  data() {
    return {
      isCustom: true, // 控制是否应用自定义字体
    };
  },
};
</script>

在这个例子中，当`isCustom`属性为`true`时，文本将采用自定义字体`Arial`。如果`isCustom`变为`false`，则会使用默认的系统字体。

如果你想直接在HTML模板上改变单个元素的字体，可以这样做：

<button @click="setFont('楷体')">更改字体</button>
<p :style="{ fontSize: currentFont === '楷体' ? '24px' : '16px' }">这是文本</p>

<script>
export default {
  data() {
    return {
      currentFont: '宋体',
    };
  },
  methods: {
    setFont(font) {
      this.currentFont = font;
    },
  },
};
</script>

点击按钮后，`currentFont`会被更新，相应地改变文本的字体大小。