vue :style :class多个三元表达式判断使用

作者：System 时间：2024年08月13日分类：所有,css3 字数：757

这篇文章距离上次修改已过274天，其中的内容可能已经有所变动。

在Vue中，你可以在:style和:class绑定中使用多个三元表达式来动态地应用样式和类。这里是一个简单的例子：

<template>
  <div :class="{ active: isActive, 'text-success': hasSuccess, 'text-danger': hasError }"
       :style="{ color: hasError ? 'red' : hasSuccess ? 'green' : 'black', fontWeight: isBold ? 'bold' : 'normal' }">
    Hello Vue!
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasSuccess: true,
      hasError: false,
      isBold: true
    };
  }
};
</script>

在这个例子中，:class绑定根据数据属性isActive、hasSuccess和hasError来决定应用哪些类。同时，:style绑定根据hasError和hasSuccess的值决定color和fontWeight的值。如果hasError为true，则字体颜色为红色；如果hasSuccess为true，则字体颜色为绿色；否则字体颜色为黑色。如果isBold为true，则fontWeight为粗体，否则为正常。

vue :style :class多个三元表达式判断使用

评论已关闭

推荐阅读