乐趣区

关于vue.js:Vue3样式绑定

jiezi

小编明天和大家分享对于 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>

大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈

退出移动版