Vue绑定样式

小辰~

已于 2022-07-01 23:55:13 修改

阅读量55

点赞数

分类专栏： Vue 文章标签： vue 前端

于 2022-06-22 15:19:06 首次发布

本文链接：https://blog.csdn.net/xiaochen_2715/article/details/125410051

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文通过实例展示了Vue.js中如何动态绑定class和style，包括字符串写法、数组写法和对象写法，以及内联样式的对象和数组形式，详细解释了不同绑定方式的适用场景，帮助读者理解Vue.js中样式操作的灵活性。

摘要由CSDN通过智能技术生成

Vue绑定样式

直接示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<style>
    .basic{

    }
    .s1{
        color: red;
    }
    .s2{
        color: green;
    }
    .s3{
        color: skyblue;
    }
    .basic1{
        border: cadetblue 2px solid;
        width: 200px;
        height: 100px;
    }
    .b1{
        background-color: salmon;
    }
    .b2{
        font-size: 30px;
    }
</style>
<body>
<div id="app">
    <!--绑定class样式-字符串写法，适用于样式类名不确定，需要动态指定-->
    <button class="basic" :class="sty" @click="setColor">点一下随机变色</button>
    <br><br>
    <!--绑定class样式-数组写法，适用于样式类名不确定，个数也不确定-->
    <div class="basic1" :class="styArr" @click="setSty">点一下变化</div>
    <br><br>
    <!--绑定class样式-对象写法，适用于样式类名确定，个数也确定，但要动态决定要不要用-->
    <div class="basic1" :class="styObject" @click="setStyObj">点一下变化</div>
    <br><br>
    <!--内联样式-->
    <!--'font-size' 改为驼峰命名'fontSize',并且改为对象-->
    <div class="basic1" :style="{fontSize : fz + 'px'}" @click="fz++">点击字体增大</div>
    <br><br>
    <!--绑定style样式-对象写法-->
    <div class="basic1" :style="fontSizeObj">对象形式的内联样式</div>
    <br><br>
    <!--绑定style样式-数组写法-->
    <div class="basic1" :style="[fontSizeObj,fontSizeObj1]">数组对象形式的内联样式</div>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;   //阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: '#app',
        data: {
            sty: '',
            styArr: [],
            styObject: {
                s1: false,
                b1: false,
                b2: false
            },
            fz: 20,
            fontSizeObj: {
                fontSize: this.fz + 'px',
                color: 'red'
            },
            fontSizeObj1: {
                backgroundColor: 'gray'
            }
        },
        methods: {
            setColor(){
                const arr = ['s1','s2','s3']
                const index = Math.floor(Math.random()*3)
                this.sty = arr[index];
            },
            setSty(){
                this.styArr = ['s1','b1','b2']
            },
            setStyObj(){
                this.styObject.s1 = true
                this.styObject.b1 = true
                this.styObject.b2 = true
                console.log('set')
            }
        },
        computed: {
        }
    })
</script>
</html>