绑定样式篇

Encounter∞

已于 2023-01-13 17:47:06 修改

阅读量433

点赞数

文章标签： javascript vue.js 前端

于 2021-12-25 22:09:15 首次发布

本文链接：https://blog.csdn.net/qq_44482048/article/details/122149490

版权

1.class样式

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

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

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

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

2.style样式：

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

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

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

绑定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)]
        }
      },

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

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

data: {

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

绑定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'
                }
            ]