Vue2基础 07：class与style绑定

原创已于 2024-07-24 13:52:24 修改 · 1.8k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-05-26 19:20:24 首次发布

Vue.js 专栏收录该内容

14 篇文章

订阅专栏

class与style绑定

1 绑定class样式
2 绑定style样式
- 2.1 对象写法
- 2.2 数组写法（用的少）

1 绑定class样式

写法 :class=“xxx” (带冒号) xxx 可以是字符串、对象、数组

字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

先准备happy、sad、normal三种样式。

<head>
    <style>
        .basic{
            width: 200px;
            height: 200px;
            overflow: auto;/*自动滚动*/
            border: 1px solid black;
        }
        .happy{
            background-color: peru;
        }
        .sad{
            background-color: grey;
        }
        .normal{
            background-color: blue;
        }
    </style>
</head>

1.1字符串写法

适用类名不确定，要动态获取
案例点击按钮后随机切换样式

准备好容器，并在一个div上绑定class样式mood、按钮绑定事件changemood以及插值语法name。

<body>
    <div id="root">
        <div class="basic" :class="mood" @click="changemood">{{name}}</div>
    </div>
</body>

<div>详解
 css详解

vue实例中定义methodschangemood、class绑定的字符串datamood和插值语法的dataname。

<script type="text/javascript">
    new Vue({
        el:'#root',  
        data:{ 
            name:'张三',
            mood:'happy'
        },
        methods:{
            changemood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>

初始化页面，此时是happy的样式
在这里插入图片描述
点击按钮进行随机切换，此时控制台输出了index 的值为1，即arr[1] 为sad的样式。

1.2数组写法

适用要绑定的个数不确定，名字也不确定
案例点击增加或减少样式

准备好三个样式

			<style>
      			.basic{
                    width: 200px;
                    height: 200px;
                    overflow: auto;/*自动滚动*/
                    border: 1px solid black;
                }
                .class1{
                    background-color: blue;
                }
                .class2{
                   text-align: center;
                }
                .class3{
                    color: red;
                }

            </style>

准备好容器，并加一个div上绑定class样式classArr、按钮绑定事件changeclass以及插值语法name。

<body>
    <div id="root">
        <div class="basic" :class="classArr" @click="changeclass">{{name}}</div>
    </div>
</body>

若绑定class样式直接写数组内容“:class=[‘class1’,‘class2’,‘class3’]” 则无法动态切换

<script type="text/javascript">
    new Vue({
        el:'#root',  
        data:{ 
            name:'张三'，
            classArr:['class1','class2','class3']
        },
        methods:{
            changeclass(){
                this.classArr.shift()//移掉数组的第一个元素
                this.classArr.push('class1')//往里推
            }
        },
    })
</script>

JS中关于数组的函数
shift()：移除数组中的第一项并返回该项
push()：从数组末端添加项
若是想实现相反的操作的话，可以使用：
unshift()：在数组的前端添加项
pop()：从数组末端移除项

初始化，三种样式同时出现。
在这里插入图片描述
点击一次后

1.3 对象写法

适用要绑定的个数、名字确定，但是动态确定用不用

案例准备好容器，并在一个div上绑定class样式classObj。

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

创捷data中的对象classObj

<script type="text/javascript">
    new Vue({
        el:'#root',  
        data:{ 
            name:'张三'，
            classObj:{
                class1:false,
                class2:false,
            }
        },
    })
</script>

2 绑定style样式

:style= "{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。

2.1 对象写法

动态绑定需要把style写成对象形式key:vaue，带“-”的属性名去掉，且改为驼峰写法。

<body>
    <div id="root">
        <div class="basic" style="font-size: 40px;" >{{name}}</div>
        <div class="basic" :style="{fontSize: fsize + 'px'}" >{{name}}</div>
        <!--一般写为:-->
        <div class="basic" :style="styleObj" >{{name}}</div>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el:'#root',  
        data:{ 
            name:'张三'，
            fsize:40,
            styleObj:{
                fontSize: '40px',
                color: 'red',
                backgroundColor: 'orange'
            }
        },
    })
</script>

2.2 数组写法（用的少）

<body>
    <div id="root">
        <div class="basic" :style="[styleObj1,styleObj2]" >{{name}}</div>
        <div class="basic" :style="styleArr" >{{name}}</div>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el:'#root',  
        data:{ 
            name:'张三'，
            fsize:40,
            styleObj1:{
                fontSize: '40px',
                color: 'red'
            },
            styleObj2:{
                backgroundColor: 'orange'
            },
            styleArr:[
                {
                    fontSize: '40px',
                    color: 'red'
                },
                {
                    backgroundColor: 'orange'
                }
            ]
        },
    })
</script>