Vue学习 10绑定样式

Revin050

已于 2022-07-16 10:29:05 修改

阅读量277

点赞数 1

分类专栏： VUE学习文章标签： vue.js javascript 学习

于 2022-02-17 21:16:33 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/122991843

版权

VUE学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

绑定样式

绑定class

在开发中，经常涉及到为元素增加类名、修改类名的操作。关于class样式的绑定有三种写法
1.字符串写法（适用于）类名不确定，要动态获取。
2.数组写法（适用于）要绑定多个样式，个数不确定，名字也不确定。
3.对象写法（适用于）要绑定多个样式，个数确定，名字也确定，但不确定用不用。
这三种方法在下面的实例中展示。

<body>
	<div id="demo">
		<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
		<div class="basic" :class="classchange" >{{title}}</div> <br /><br />
		<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
		<div class="basic" :class="classArr">{{title}}</div> <br /><br />
		<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
		<div class="basic" :class="classObj">{{title}}</div> <br /><br />
	</div>
	<script type="text/javascript">
		const vm = new Vue({
			el: '#demo',
			data: {
				title: '绑定class',
				classchange: 'class1',
				classArr: ['class4', 'class5', 'class6'],
				classObj: {
					class4: false,
					class5: false,
					class5: true,
				},	
			},
		})
	</script>
</body>

绑定style

除了直接修改class，还可以通过修改style进行样式修改。
style主要有两种写法：
第一种是对象写法
:style="{fontSize: xxx}“其中xxx是动态值。
第二种是数组写法（使用较少）
:style=”[a,b]"其中a、b是样式对象。

<body>
    <div id="demo">
        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj">{{title}}</div> <br /><br />
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{title}}</div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#demo',
            data: {
                title: '绑定style',
                styleObj: {
                    fontSize: '40px',
                    color: 'red',
                },
                styleArr: [
                    {
                        fontSize: '20px',
                        color: 'blue',
                    },
                    {
                        backgroundColor: 'green'
                    }
                ]
            },
        })
    </script>
</body>