vue中当中样式绑定

最新推荐文章于 2024-08-24 12:37:57 发布

成熟的麦芽糖

最新推荐文章于 2024-08-24 12:37:57 发布

阅读量92

点赞数

文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/m0_72788309/article/details/129180802

版权

  <style>
      .review {
        background-color: orange;
        border: 2px solid yellowgreen;
      }
      .classA {
        background-color: orange;
        border-radius: 10px;
      }
      .isSelect {
        background-color: pink;
        color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>{{title}}</h1>
      <h1 style="color: red" class="review">复习原始样式</h1>
      <hr />
      <h1>class绑定样式</h1>
      <p :class="one">第一种方式:直接绑定变量</p>
      <!--对象 key是 类名  value是布尔值  true代表生效 false 不生效 -->
      <p :class=" {classA:true, review:isActive} ">第二种方式:对象的形式</p>
      <!-- 常用于 选中态 -->
      <p :class="   isActive ?  'isSelect' : '' ">第三种: 三元运算符</p>
      <!-- 数组 绑定 多个类名   -->
      <p :class=" [one,'review'] ">第四种:数组</p>
      <hr />
      <h1>style 行内式</h1>
      <p :style="  {color:'red',background:bg0}  ">第一种:对象的形式</p>
      <p :style=" styleObj  ">第二种形式:对象变量</p>
    </div>
    <script>
      let { createApp } = Vue;
      const app = createApp({
        data() {
          return {
            title: "样式绑定",
            one: "classA",
            isActive: true,
            bg0: "orange",
            styleObj: {
              border: "1px solid red",
              color: "white",
              background: "yellowgreen",
            },
          };
        },
      }).mount("#app");
    </script>
  </body>