: class modify style

One 、 binding class style

Can be Need dynamic binding style and Styles that do not require dynamic binding Define separately , Separate use :class and class Keyword definition ;

1、 String writing

Followed by a string of expression , Can get the data Variables defined in , Can be achieved through Modify variables Modify the style ;

<!--  added : Of :class It's followed by mood Expression for , Can get variables mood -->
<div class="basic" :class="mood" @click="changeMood">{
   {name}}</div><br><br>

Be careful ：

（1）:class And then one character string , Applicable to the style to be bound Class name is uncertain , need Dynamically specify ;

（2）:class The following string represents a expression ( It's defined in data in ), Can pass methods Method defined in modify data Defined expression Realization class Property modification ;

2、 Array writing

And then one Array name , Applicable to the style to be bound Number and name Not sure , Use one Array storage style

<!--  binding class style -- Array writing , Apply to ： The number of styles to bind is uncertain , The name is uncertain   -->
<div class="basic" :class="classArr" >{
   {name}}</div><br><br>

3、 Object writing

For binding Number of styles determine , But not sure Whether to use Change the style , Can pass Modify its Boolean value decision Whether to use

<!--  binding class style -- Object writing , Apply to ： Determine the number of styles to bind , The name is confirmed , But whether to use it is uncertain   -->
<div class="basic" :class="classObj" >{
   {name}}</div><br><br>

4、 Inline style object writing

Use keyword :style Store inline styles in data in ,:style One after another Variable , Conduct Dynamic binding  

<!--  binding class style -- Inline style object writing , Apply to ： Determine the number of styles to bind , The name is confirmed , But whether to use it is uncertain   -->
<div class="basic" :style="styleObj">{
   {name}}</div><br><br>

5、 Inline style array writing （ To use less ）

  In the array , Take the object as an element of the array

 <!--  To use less -- Inline style array  -->
<div class="basic" :style="[styleObj,styleObj2]">{
   {name}}</div>

<script>
    Vue.config.productionTip = false

    new Vue({
        el:"#root",
        data:{
            name:"text",
            mood:"normal",
            classArr:["happy","sad"],
            classObj:{
                happy:false,
                sad:true
            },
            styleObj:{
                fontSize:'40px',
                color:'red'
            },
            styleObj2:{
                backgroundColor:'orange'
            }
        },
        methods: {
            changeMood(){
                // this.mood="happy"
                const arr = ["happy","normal","sad"]
                this.mood=arr[Math.floor(Math.random()*3)]
            }
        },
    })
</script>