vue学习（七） class和style学习

野性酷女 2022-04-22 10:52 184阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .class1{
            color: red;
        }
        .class2{
            font-size:120px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
       &lt;div :class="{class1:isFalse,class2:isFalse}" @click="handleClick"&gt;我是class对象的方式&lt;/div&gt;

&lt;div :class="[class3,class4]" @click="handleClick1"&gt;我是class数组的方式&lt;/div&gt;

&lt;div class="class1"&gt;非动态绑定&lt;/div&gt;

&lt;div :style="style1" @click="handleClick2"&gt;我是style对象的方式&lt;/div&gt;

&lt;div :style="[style1,{backgroundColor:'black'}]" @click="handleClick2"&gt;我是class数组的方式&lt;/div&gt;

&lt;div style="color: red"&gt;非动态绑定&lt;/div&gt;
    &lt;/div&gt;

&lt;script&gt;
        var app=new Vue({
            el:"#app",
            data:{
                isFalse:false,
                class3:null,
                class4:null,
                style1:{
                    color:'black',
                    fontSize:'10px'
                }
            },
            methods:{
                handleClick:function () {
                    this.isFalse=!this.isFalse
                },
                handleClick1:function () {
                    this.class3=this.class3==null?"class1":null;
                    this.class4=this.class4==null?"class2":null;
                },
                handleClick2:function () {
                    this.style1.color=this.style1.color=='red'?"black":'red';
                    this.style1.fontSize=this.style1.fontSize=='120px'?"12px":'120px';
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>