v-bind dynamic property binding

Hits: 0

  1. Basic use

<div  :class="['bdtop' , 'bdbottom']"></div>

The value of the class attribute without the v-bind directive is a string

The value of the class attribute using the v-bind instruction is not a string, but an expression. The value in the expression is not an ordinary character, but a variable, the data in the data attribute of the Vue instance, use: shorthand
2. [Dynamic binding Defining] multiple class attributes
2.1 Array binding
Sometimes we want to dynamically bind multiple class names to a DOM element, because the dynamically bound class value is an expression, we can use an array to bind multiple dynamically class name, so v-bind:class can dynamically bind the class value using an array to bind multiple class class names

<div  :class="['bdtop' , 'bdbottom']"></div>

At this time, this div will have two class names of bdtop and bdbottom at the same time. Personal understanding: the main purpose of using v-bind is to achieve dynamic binding, using an array to contain strings, forcibly using strings in two-way binding, not Need to go to data to find data
2.2 Object binding
Since the value of the dynamic binding class is an expression, then you can write some basic expressions in the expression to process the data, and
decide whether to add to the DOM element through logical judgment. this class name

<div >

    <!-- If the value of the variable isTrue is true at this time, the value represented by the variable msg will be displayed --> 
    <!-- If isTrue is false, it will be an empty string -->

    <!-- 1. When isTrue is true--> 
    < h2  :class = "isTrue ? msg : ''" > Hello </ h2 >


</div>
<script>   
    const vm = new Vue({

        data: {
            isTrue:true,
            msg:'msg'
        },

    })
</script>

In this example, when the value of isTrue is true, the div tag has a class name, and if it is false, the value is an empty string and no class name. The boolean isTrue judgment is used to switch the class name to change the style
, but if a label Class names that require multiple switches need to use object notation

<div : class = "{box:isTrue, wrap: !isTrue}" >Hello</div>

You may also like...

Leave a Reply

Your email address will not be published.