day61- 绑定样式

绑定样式

分为绑定class与绑定style

首先创建css属性

<style>
     .basic{
         width: 400px;
         height: 100px;
         border: 1px solid black;
     }
     .happy{
         background-color: #4158D0;
         background-image: linear-gradient(328deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
 ​
     }
     .sad{
         background-color: #FFFFFF;
         background-image: linear-gradient(60deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
 ​
     }
     .normal{
         background-color: #8EC5FC;
         background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
 ​
     }
     .a1{
         text-align: center;
     }
     .a2{
         text-align: right;
         text-shadow: #3cc7f5 10px 10px 2px;
     }
     .a3{
         text-indent: 2em;
         border-radius: 10px;
     }
 </style>

 

class绑定

字符串写法

适用于样式的类名不确定，需要动态指定

<!--绑定class样式--字符串写法，适用于样式的类名不确定，需要动态指定-->
 <div class="basic" :class="mood" @click="changeMood">{{name}}</div>

 

在script中写methods方法

 methods:{
     changeMood(){
         const arr = ['happy','sad','normal']
         const aa = Math.floor(Math.random()*3)
         this.mood = arr[aa]
     }
 }

 

点击标签内部随机切换

数组写法

适用于要绑定的样式个数不确定，名字也不确定

 <!--绑定class样式--数组写法，适用于要绑定的样式个数不确定，名字也不确定-->
 <div class="basic" :class="arr">{{name}}</div>

 

arr作为vue的data属性，相当于多种属性叠加

 arr:['a1','a2','a3'],

 

对象写法

适用于要绑定的样式个数确定，名字也确定 但要动态决定

 <!--绑定class样式--对象写法，适用于要绑定的样式个数确定，名字也确定 但要动态决定-->
 <div class="basic" :class="obj">{{name}}</div>

obj:{
     a1:false,
     a2:false
 },

 

可以动态修改false与true来决定是否应用该样式

style绑定

对象写法

 <!--绑定style样式--对象写法-->
 <div class="basic" :style="styleobj">{{name}}</div>

 

 styleobj:{
     fontSize:'40px'
 }

 

直接修改style的值进行更改样式

总结

 <!--
     绑定样式：
         1.class样式
             写法： :class='xxx'，xxx可以是字符串，对象，数组
                 字符串用于样式的类名不确定，需要动态指定
                 对象用于样式个数确定，名字也确定 但要动态决定
                 数组用于样式个数不确定，名字也不确定
         2.style样式
             :style="{fontSize:xxx}“其中xxx是动态值
 -->

 

over