Detailed explanation of normalizeClass function in Vue3: application of flexible class name rendering method

In Vue3, in order to more conveniently operate the class name in the component template, a new function normalizeClass is provided, which can generate a standardized class name string based on the incoming array or object.

The normalizeClass function not only makes the rendering of class names more flexible, but also helps us better organize and manage class names, making the component style easier to maintain.

Next, let’s take a closer look at the usage and application scenarios of the normalizeClass function.

1. Basic usage of normalizeClass function

normalizeClass function supports two parameters. The first parameter can be an array or object, and the second parameter can be an optional parameter for specifying Default class name.

1. Array as parameter

When we pass in an array, the normalizeClass function will process each element in the array as a class name and use these Class names are concatenated into a space-separated string.

For example, we have an array styles, which contains three class names, namely 'big', 'blue' and 'bold'. If we want to separate these class names with spaces and splice them into a whole class name, we can use the normalizeClass function. The code is as follows:

<template>
  <div :class="normalizeClass(styles)"></div>
</template>

<script>
  export default {
    data() {
      return {
        styles: ['big', 'blue', 'bold']
      }
    }
  }
</script>

In this way, Vue3 will combine the three classes in the styles array The names are concatenated into a style string and then rendered to the element in the template.

2. Object as parameter

When we pass in an object, the normalizeClass function will generate a class name string based on the attribute value and attribute name of the object.

The attribute value of an object is usually a Boolean value. When the value is true, it means that the corresponding class name will take effect, and when it is false, it will not take effect.

For example, we have an object styles, which contains three attributes big, blue and bold, and the attribute values ​​are true and false respectively. If we want to determine which class names to display based on attribute values, we can use the normalizeClass function. The code is as follows:

<template>
  <div :class="normalizeClass(styles)"></div>
</template>

<script>
  export default {
    data() {
      return {
        styles: {
          big: true,
          blue: false,
          bold: true
        }
      }
    }
  }
</script>

When we use the normalizeClass function like this, Vue3 will The two class names big and bold are concatenated into a string and rendered to the element in the template.

3. Specify the default class name

In some cases, we want to add some default class names to the class name string when generating it. At this time, we can use the second parameter of the normalizeClass function. The code is as follows:

<template>
  <div :class="normalizeClass(styles, 'container')"></div>
</template>

<script>
  export default {
    data() {
      return {
        styles: ['big', 'blue', 'bold']
      }
    }
  }
</script>

In this way, when we use the normalizeClass function to generate a class name string, the class name string and the default class name will be 'container' is concatenated into a style string and then rendered to the element in the template.

2. Advanced usage of normalizeClass function

In addition to basic usage, normalizeClass function also has some advanced usage, which allows us to organize and manage class names more flexibly.

1. Pass in a function as a parameter

When we need to dynamically generate a class name based on certain dynamic conditions, we can pass in a function as a parameter of the normalizeClass function .

This function receives a context object, which contains the current component instance, component props, component data and other data. We can dynamically generate class names based on these data.

For example, we have a component Checkbox, which has an attribute checked, which is used to specify whether it is checked. We want to add a class name 'checked' to it when it is selected. We can implement it like this:

<template>
  <label :class="normalizeClass({ 'checked': isChecked })">
    <input type="checkbox" v-model="isChecked">
    {{ label }}
  </label>
</template>

<script>
  export default {
    props: {
      label: String,
      checked: Boolean
    },
    data() {
      return {
        isChecked: this.checked
      }
    },
    watch: {
      checked(value) {
        this.isChecked = value
      }
    },
    methods: {
      normalizeClass(context) {
        return context.props.checked ? ['checked'] : []
      }
    }
  }
</script>

In this way, when the checked attribute in props is true, the normalizeClass function will return an array containing the 'checked' class name, otherwise it will return an empty array, thereby dynamically managing the class name .

2. Passing in an object as a parameter

When we need to dynamically generate a class name based on some objects, we can pass in an object as a parameter of the normalizeClass function.

This object can be composed of multiple attributes. The value of each attribute can be a Boolean value, which is true when the conditions are met and false when the conditions are not met. The normalizeClass function will decide whether to add the class name corresponding to the attribute based on the value of these attributes, thereby dynamically managing the class name.

For example, we have a component Badge, which has an attribute count, indicating the quantity. When the quantity is 0, we want to add a class name 'none' to it to cover the element. We can implement it like this:

<template>
  <div :class="normalizeClass({ 'none': count === 0, 'has-count': count > 0 })">
    <div class="badge-count">{{ count }}</div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      count: Number
    },
    methods: {
      normalizeClass(context) {
        const classList = []
        for (const key in context.props) {
          if (context.props.hasOwnProperty(key) && context.props[key]) {
            classList.push(key)
          }
        }
        return classList
      }
    }
  }
</script>

In this way, when the count attribute in props is 0, the normalizeClass function will return an array containing the 'none' class name, otherwise it will return an array containing the 'has-count' class An array of names to dynamically manage class names.

Summary:

The normalizeClass function is one of the built-in functions of the Vue3 framework. It can generate a standardized class name string based on an array or object, helping us better organize and manage components. style. In actual development, we can dynamically generate class names based on certain dynamic conditions, or decide whether to add certain class names based on some objects, thereby achieving more flexible style management.

The above is the detailed content of Detailed explanation of normalizeClass function in Vue3: application of flexible class name rendering method. For more information, please follow other related articles on the PHP Chinese website!