码迷,mamicode.com
首页 > 其他好文 > 详细

Vue2.x Class & Style Bindings

时间:2021-02-15 12:40:17      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ini   offic   cond   art   vue   gui   from   tle   while   

Intoduciton: The way of using ‘‘ in html part confused me when I was learning Class&Style Bindings in Vue‘s official guide.(of course it‘s also because of my weak foundation). To help newcomer understand, Vue‘s official guide seemed a little lengthy. So I decided to reorganize them.

The follow content won‘t contain many examples, you can click the superlink above to see the official guide‘s.

Binding Inline Styles

In my opinion, key is a pointer, which means we could save the content in somewhere and use them flexibly. In some sense, class is a pointer of style. So I‘d like to introduce style firstly.

Basic syntax

  • Direct:e.g.:style="{ style-name-color: data-key, style-name-fontSize: data-key + ‘px‘ }"

    Don‘t forget to add uint like ‘px‘

  • Object::style="data-key-styleObject"

  data: {
    data-key-styleObject: {
      color: ‘red‘,
      fontSize: ‘13px‘
    }
  }
  • Array::style="[styleObjects, overridingStyleObjects]"

    styleObjects means we could multiple "{}" and "data-key"

Advanced

  • Multiple Values::style="{ display: [‘-webkit-box‘, ‘-ms-flexbox‘, ‘flex‘] }"

    This will only render the last value in the array which the browser supports. In this example, it will render display: flex for browsers that support the unprefixed version of flexbox.(Copy from Vue official guide)

Binding HTML Classes

As I said before, class is pointer of style. The diffrence is that class is found in <style> while data-key is found in <script>.

Basic syntax

  • Direct: :class="data-key" but :class=" ‘class-name‘ "

  • Array: :class="[ data-key ]" but :class="[ ‘class-name‘ ]"

  • Object: :class="{ class-name : data-key }" & :class="{ ‘class-name‘ : data-key }"

    In Object, if the class-name contains ‘-‘, it should be ‘class-name‘, otherwise there will be a error.

    In Object, if use data-key with ‘‘ will turn into string => ‘string‘, therefore it would always be true.

Advanced

  • Multiple conditional classes: :class="[{ class-name: data-key }, class-name]"

Vue2.x Class & Style Bindings

标签:ini   offic   cond   art   vue   gui   from   tle   while   

原文地址:https://www.cnblogs.com/sagekwun/p/14398224.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!