vue 字体加粗

<!-- 使用 Vue 实现字体加粗的示例代码 -->

<div id="app">
  <p :style="{ fontWeight: isBold ? 'bold' : 'normal' }">这是一段可以切换加粗的文字。</p>
  <button @click="toggleBold">切换加粗</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      isBold: false
    };
  },
  methods: {
    toggleBold() {
      this.isBold = !this.isBold;
    }
  }
});
</script>

解释说明：

• :style="{ fontWeight: isBold ? 'bold' : 'normal' }"：通过绑定内联样式，根据 isBold 的值来动态设置 fontWeight 属性。当 isBold 为 true 时，文字加粗；否则，文字正常显示。
• @click="toggleBold"：点击按钮时触发 toggleBold 方法，切换 isBold 的布尔值，从而实现文字加粗状态的切换。
• data()：定义了一个名为 isBold 的数据属性，默认为 false，表示初始状态下文字不加粗。
• methods：定义了 toggleBold 方法，用于切换 isBold 的值。