当前位置：首页 > article >正文

《Vue零基础入门教程》第十五课：样式绑定

article 2024/12/3 23:08:00

往期内容

《Vue零基础入门教程》第六课：基本选项

《Vue零基础入门教程》第八课：模板语法

《Vue零基础入门教程》第九课：插值语法细节

《Vue零基础入门教程》第十课：属性绑定指令

《Vue零基础入门教程》第十一课：事件绑定指令

《Vue零基础入门教程》第十二课：双向绑定指令

《Vue零基础入门教程》第十三课：条件渲染

《Vue零基础入门教程》第十四课：列表渲染

1) 什么是样式绑定

通过绑定class属性或者 style属性修改样式

2) 绑定class属性

常见有两种语法

数组写法
对象写法

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <style>
      .red {
        color: red;
      }
      .blue {
        color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 原生的写法 -->
      <span class="red blue">一段文字</span>

      <!-- 绑定class属性 -- 对象的写法 -->
      <span :class="obj">对象的写法</span>

      <!-- 绑定class属性 -- 数组的写法(推荐) -->
      <span :class="arr">数组的写法</span>

      <span :class="foo">绑定一个变量</span>

      <span :class="flag ? 'red' : 'blue'">使用表达式</span>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            obj: {
              red: true,
              blue: true,
            },
            arr: ['red', 'blue'],
            foo: 'red',
            flag: true,
          }
        },
      }).mount('#app')
    </script>
  </body>
</html>

3) 绑定style属性

对象写法

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 原生的写法 -->
      <div style="font-size: 32px; color: red">原生的写法</div>
      <!-- 绑定style属性 -- 对象写法 -->
      <div :style="obj">对象的写法</div>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            obj: {
              // 'font-size': '32px',
              fontSize: '32px',
              color: 'red',
            },
          }
        },
      }).mount('#app')
    </script>
  </body>
</html>

4) 作业
💡 需求
实现京东tab栏切换

参考答案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1.1 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <!-- 2.2 实例静态页面(CSS部分) -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }

      .menu-tab {
        display: flex;
        justify-content: space-between;
        margin: 50px auto;
        height: 40px;
        width: 700px;
        border: 1px solid #eee;
        border-bottom: 1px solid #e4393c;
        background-color: #f7f7f7;
        box-sizing: border-box;
      }
      .menu-tab .menu-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 14px;
        color: #666;
        cursor: pointer;
      }
      .menu-tab .menu-item:hover {
        color: #e4393c;
      }
      .menu-tab .menu-item.current {
        color: #fff;
        background-color: #e4393c;
      }
    </style>
  </head>
  <body>
    <!-- 1.2 编写页面容器 -->
    <div id="app">
      <!-- 2.1 实例静态页面(HTML部分) -->
      <ul class="menu-tab">
        <!-- <li
          v-for="(item, index) in items"
          class="menu-item"
          :class="index == active ? 'current' : '' "
          @click="active = index"
        > -->
        <li
          v-for="(item, index) in items"
          class="menu-item"
          :class="index == active ? 'current' : '' "
          @click="handleClick(index)"
        >
          {{item}}
        </li>
      </ul>
    </div>

    <!-- 1.3 创建vue实例对象 -->
    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            items: ['商品介绍', '规格与包装', '售后保障', '商品评价(2000+)', '手机社区'],
            active: 0,
          }
        },
        methods: {
          handleClick(i) {
            console.log(i)
            this.active = i
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>