[JavaScript知识库]绑定样式篇

1.class样式

? 写法：class=‘XX’ XXX可以是字符串、对象、数组。

? 字符串写法适用于：类名不确定，要动态获取

? 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定

? 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

? 2.style样式：

? :style = "{fontSize:XXX}"其中XXX是动态值

? :style = "[a,b]"其中a,b是样式对象

一、正常的样式就正常写，变化的样式使用绑定的形式去写，用v-bind写,也可以用缩写形式:class

1. 绑定class样式–字符串写法，适用于样式的类别不确定，需要动态指定

<div class="basic" :class="mood" @click="changeMood">{{name}}</div> 

data: {

?      name: '严浩翔',
?      mood: 'normal',  //这里的normal代表的是样式名normal
?    },
     methods: {
       changeMood() {
       const arr = ['happy', 'sad', 'normal']
       //随机生成随机数  Math.random()返回的是0（含）到1（不含）的随机数
       this.mood = arr[Math.floor(Math.random() * 3)]
        }
      },

2. 绑定class样式–数组写法，适用于：要绑定的样式个数不确定，名字也不确定

    <div class="basic" :class="arr">{{name}}</div>

data: {

?    name: '严浩翔',
?    arr: ['atguigu1', 'atguigu2', 'atguigu3']//这里的atguigu1也都是样式名
?    },

3. 绑定class样式–对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用

    <div class="basic" :class="classObj">{{name}}</div>
   

   data: {
      ?      name: '严浩翔',
      ?      classObj: {
      ?        atguigu1: false,
      ?        atguigu2: true,
      ?      }
      ?    },
   
   

   二、绑定style样式

   如果想要动态的绑定style，格式是 属性名：属性值 的形式

   这么写的优势是可以在Vue里直接该字体，不用操作dom

   1.绑定style样式–字符串写法(但是这种写法比较不好看)

  <div class="basic" :style="fontSize:fsize+'px'">{{name}}</div>

   data: {

?      name: '严浩翔',

?	   fsize:'40'

}

? 2.绑定style样式–对象写法

 <div class="basic" :style="styleObj">{{name}}</div><br>

 styleObj: {
//这里的属性名之所以这么写是因为css中定义了font-size,如果是一个单词，比如说color，那就正常写就行
             fontSize: '40px'
            },

3.绑定style样式–数组写法

 <div class="basic" :style="styleArr">{{name}}</div>

 styleArr: [
                {
                    fontSize: '40px',
                    color: 'red'
                },
                {
                    backgroundColor: 'skyblue'
                }
            ]