In vue, a summary of the writing method of adding one or more styles and classes according to the judgment conditions

In vue, add one or more styles and classes according to the judgment conditions.

Style writing:

<i:style="{'color':isBling?'red':'white'}" @click=""></i>

Class writing method

<i :class='[show ?"class1":"class2","iconfont"]' @click="toggleVisual"></i> 

class1 and class2 are unique styles. iconfont is a common style

Extension: About several ways to use class in vue

About: The use of class is compiled as follows in combination with its own implementation. The next article is written: style. In fact, from:class, you can think of the use of:style.

1. class

1 Custom class Implemented by vue computed properties My class is name + timestamp, unique and can be used as an id role.

html:

<div :class="_module"></div>

js:
data(){
    return {
        arr:{
            m_class:"",
　hasClass:false

        }
    }        
},
computed:{
    _module:{
          get: function () {
              if(){
                   return .m_class
              }else{
                  return .m_class="module_"+(new Date().getTime())
              }
        }
    }
}

2. Use ternary expression to represent class

If titleSrc exists, add bgImgSet. If titleSrc does not exist, there will be no class

html:
<div :class="?'bgImgSet':''"></div>

data(){
    return {
        ind:{
            titleSrc:""
        }
    }        
}

3. If there are two dynamic classes, you can write them as follows. Note that you cannot write two on the tag: class

< div 
    class="allCommon " 
    @="clickSet(_module)" :class="[_module,{'takePlace':!}]">
    ......
</ div >

In the form of an array:
Here _module is generated by me using 1 method, and I need to add class to the div of each module of my project; takePlace is the placeholder class Only specific modules can be added. Regarding how to add two dynamic classes, I finally figured out that it can be implemented in an array way. The code is shown above.

4. When it comes to dynamic changes in styles, I think of the v-bind:class directive, but in the original way:

<div :class="func(state)"> //html

methods: {
    func(state){
       if(state===0){
           return "class1";
       }
       else{
          return "class2"
       }
    }
}

This is the article about adding one or more styles according to the judgment conditions and writing class in vue. This is all about adding one or more styles according to the judgment conditions. For more related vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!