Vue3样式绑定

Posted 2021-09-21 飞鹰3995

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3样式绑定相关的知识，希望对你有一定的参考价值。

小编今天和大家分享关于Vue中的样式和class的绑定，

首先声明，这篇文章出现的class不是类声明的关键字，而是标签内部的属性，用于实现样式
在原生html中，我们给一个元素添加样式的时候，大概有这么两种方式

<!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>
</head>
<body>
    <div style="color:red">我是一个红色的小可爱</div>
</body>
</html>

第二种方式就是在head标签之间，添加style标签，将样式统一写在style之间，然后在标签中定义对应的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>
    <style>
        .red_color{
            color:red
        }
</style>
</head>
<body>
    <div class="red_color">我同样是一个红色的小可爱</div>
</body>
</html>

对于Vue来说，有以下四种方式定义样式和class
一、通过Vue提供的v-bind方式绑定字符串，就像这样

<html>
  <head>
    <style>
      .red_color{
        color:red
      }
      .green_color{
        color:green
      }
      .yellow_color{
        color:yellow
      }
    </style>
  </head>
  <body>
    <script>
      const app = Vue.createApp({
          data(){
              return {
                  classString:\'red_color\'
              }
          },
          template: `<div :class="classString">Hello World</div>`
      })
      const vm = app.mount(\'#root\')
    </script>
  </body>
</html>

最后渲染出来的DOM长这样

<div class="red_color">Hello World</div>

二、class绑定的还可以是个Object，这个Object比较特别，key为定义好的class，value为Boolean，为true的时候，添加该class，否则不添加该class

<html>
  <head>
    <style>
      .red_color{
        color:red
      }
      .green_color{
        color:green
      }
      .yellow_color{
        color:yellow
      }
</style>
  </head>
  <body>
    <script>
      const app = Vue.createApp({
          data(){
              return {
                  classObj:{
                    red_color: true,
                    green_color: true,
                    yellow_color: false
                }
              }
          },
          template: `<div :class="classObj">Hello World</div>`
      })
      const vm = app.mount(\'#root\')
</script>
  </body>
</html>

最后渲染出来的DOM长这样

<div class="red_color green_color">Hello World</div>

三、class绑定的还可以是个Array，当然Array中的元素也可以是个Object，只不过这个Object的规则和上面的一样

<html>
  <head>
    <style>
      .red_color{
        color:red
      }
      .green_color{
        color:green
      }
      .yellow_color{
        color:yellow
      }
</style>
  </head>
  <body>
    <script>
      const app = Vue.createApp({
          data(){
              return {
                  classArray:[\'red_color\',\'green_color\',{yellow_color: true}]
              }
          },
          template: `<div :class="classArray">Hello World</div>`
      })
      const vm = app.mount(\'#root\')
</script>
  </body>
</html>

最后渲染出来的DOM长这样

<div class="red_color green_color yellow_color">Hello World</div>

四、还可以通过绑定style的方式

<html>
  <body>
    <script>
      const app = Vue.createApp({
          data(){
              return {
                  styleObj:{
                    color:\'yellow\'
                }
              }
          },
          template: `<div :style="styleObj">Hello World</div>`
      })
      const vm = app.mount(\'#root\')
</script>
  </body>
</html>

当然最后就在页面中渲染出黄色的元素
上面介绍的都没涉及到组件，要是页面中有组件又会是什么样呢
对于组件中样式，有这么两种情况，一个是子组件中只有一个最外层元素包裹的时候，是可以沿着父组件传递下去的，也就是对应的class给子组件内部，或者直接给在父页面的子组件上效果是一样的

<html>
  <head>
    <style>
      .red_color{
        color:red
      }
      .green_color{
        color:green
      }
      .yellow_color{
        color:yellow
      }
</style>
  </head>
  <body>
    <script>
      const app = Vue.createApp({
          data(){
             return {}
          },
          template: `<div>
                      Hello World
                      <demo class="green_color" />
                    </div>`
      })
      app.component(\'demo\',{ // 只有一个最外层元素的时候，把class给组件上也可以实现
        template:`<div>single</div>`
      })
      const vm = app.mount(\'#root\')
</script>
  </body>
</html>

上面的代码，将class在父页面给子组件，效果和直接在子组件中添加class效果是一样的，渲染出来的DOM也是一样的

<div>
    Hello World
    <div class="green_color">
        single
    </div>
</div>

但是当子组件不仅是一个最外层元素包裹的时候，是不能“向下传递”的，如果也想获取在组件中注册的class，可以这样实现

<html>
  <head>
    <style>
      .red_color{
        color:red
      }
      .green_color{
        color:green
      }
      .yellow_color{
        color:yellow
      }
</style>
  </head>
  <body>
    <script>
      const app = Vue.createApp({
          data(){
             return {}
          },
          template: `<div>
                      Hello World
                      <demo class="green_color" />
                    </div>`
      })
      app.component(\'demo\',{ // 只有一个最外层元素的时候，把class给组件上也可以实现
        template:`<div :class="$attrs.class">one</div>
                <div>two</div>`
      })
      const vm = app.mount(\'#root\')
</script>
  </body>
</html>

以上是关于Vue3样式绑定的主要内容，如果未能解决你的问题，请参考以下文章

Vue3样式引入和使用

VUE3中Class 与 Style 绑定

Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段

如何在与 Vite 的样式绑定中使用资产 URL

Vue3.0 的新特征 | Vue3.0 面试题总结

vue3中的fragment（片段）组件