A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 18th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

The class/style binding is a technique used to implement dynamic styling effects in an application interface where the style of an element (or elements) changes

1. classThe binding

:class='xxx' // XXX can be a string, object, or array.
Copy the code

string

  1. The expression is a string:'classA'

Apply to: class names are uncertain and need to be obtained dynamically

<! DOCTYPE html><html>

<head>
  <meta charset="UTF-8" />
  <title>Binding style</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy {
      border: 4px solid red;
      ;
      background-color: rgba(255.255.0.0.644);
      background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }

    .sad {
      border: 4px dashed rgb(2.197.2);
      background-color: gray;
    }

    .normal {
      background-color: skyblue;
    }

  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <! -- Get a container ready -->
  <div id="root">
    <! -- Bind class style -- string style, suitable for: style class name is not determined, need to be dynamically specified -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root'.data: {
      name: 'YK bacteria'.mood: 'normal'
    },
    methods: {
      changeMood() {
        const arr = ['happy'.'sad'.'normal']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }
    },
  })
</script>

</html>
Copy the code

object

  1. Expressions are objects:{classA:isA, classB: isB}

For: to bind multiple styles, the number is not determined, the name is not determined

<! DOCTYPE html><html>

<head>
  <meta charset="UTF-8" />
  <title>Binding style</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .yk1 {
      background-color: yellowgreen;
    }

    .yk2 {
      font-size: 30px;
      text-shadow: 2px 2px 10px red;
    }

    .yk3 {
      border-radius: 20px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <! -- Get a container ready -->
  <div id="root">

    <! -- bind class style -- array style, suitable for: the number of styles to bind, the name is not determined -->
    <div class="basic" :class="classArr">{{name}}</div> <br /><br />

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root'.data: {
      name: 'YK bacteria'.classArr: ['yk1'.'yk2'.'yk3']}})</script>

</html>
Copy the code

An array of

  1. Expressions are arrays:['classA', 'classB']

Apply to: to bind more than one style, the number is determined, the name is also determined, but not sure whether to use

<! DOCTYPE html><html>

<head>
  <meta charset="UTF-8" />
  <title>Binding style</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .yk1 {
      background-color: yellowgreen;
    }

    .yk2 {
      font-size: 30px;
      text-shadow: 2px 2px 10px red;
    }

    .yk3 {
      border-radius: 20px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <! -- Get a container ready -->
  <div id="root">

    <! -- Bind class style -- Object style, suitable for: the number of styles to bind, the name is also determined, but to dynamically decide whether to use -->
    <div class="basic" :class="classObj">{{name}}</div>

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root'.data: {
      name: 'YK bacteria'.classObj: {
        yk1: true.yk2: false.yk3: true}}})</script>

</html>
Copy the code

2. styleThe binding

:style="{ color: activeColor, fontSize: fontSize + 'px' }"
Copy the code

Where activeColor/fontSize is the data attribute

:style="{fontSize: xxx}"XXX is a dynamic value. :style="[a,b]"Where a and B are style objects.Copy the code

object

<! DOCTYPE html><html>

<head>
  <meta charset="UTF-8" />
  <title>Binding style</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <! -- Get a container ready -->
  <div id="root">

    <! > < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;
    <div class="basic" :style="styleObj, styleObj2">{{name}}</div>

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root'.data: {
      name: 'YK bacteria'.styleObj: {
        fontSize: '40px'.color: 'red',},styleObj2: {
        backgroundColor: 'orange'}},})</script>

</html>
Copy the code

An array of

<! DOCTYPE html><html>

<head>
  <meta charset="UTF-8" />
  <title>Binding style</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <! -- Get a container ready -->
  <div id="root">

    <! -- Bind style -- array style -->
    <div class="basic" :style="styleArr">{{name}}</div>

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root'.data: {
      name: 'YK bacteria'.styleArr: [{
          fontSize: '40px'.color: 'blue'}, {backgroundColor: 'gray'}]}})</script>

</html>
Copy the code

Finally, welcome to my column and make friends with YK bacteria