6.Vue绑定样式

最新推荐文章于 2024-07-24 16:20:17 发布

冰糖雪梨葫芦甜

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量227

点赞数 7

分类专栏： Vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lecoboy/article/details/137605400

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

绑定class样式

写法

<div :class="xxx"></div>

xxx可以是字符串、对象、数组。

字符串写法

适用场景

绑定一个样式, 类名不确定，要动态获取。

举例

需求:
点击随机切换主题按钮, 将 div 样式随机改为 redTheme 、 greenTheme 、 blueTheme 中的其中一个。
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定class样式-字符串写法</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.redTheme{
				background-color: red;
			}
            .greenTheme{
				background-color: green;
			}
			.blueTheme{
				background-color: blue;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
            <button @click="changeTheme">随机切换主题</button> <br/><br/>
			<div class="basic" :class="theme" @click="changeTheme">你好, {{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'leco',
				theme:'redTheme'
			},
			methods: {
				changeTheme(){
					const arr = ['redTheme','greenTheme','blueTheme']
					const index = Math.floor(Math.random() * 3)
					this.theme = arr[index]
				}
			},
		})
	</script>
	
</html>

效果(默认):

点击随机切换主题按钮后theme属性随机变为redTheme、greenTheme、blueTheme中的一个, 从而导致div绑定的class样式发生改变:

对象写法

适用场景

要绑定多个样式，个数确定，名字也确定，但不确定用不用。

举例

需求:
有三个复选框: 大字体、红色背景、圆角框, 根据勾选与否决定是否应用对应样式。
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定class样式-对象写法</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			.bigFont{
                font-size: 30px;
            }
			.redBg{
				background-color: red;
			}
            .borderRadius{
                border-radius: 20px;
            }
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div class="basic" :class="classObj">你好, {{name}}</div> <br/>
            <input type="checkbox" @change="applyBigFont"/>
            <label>大字体</label><br/>
            <input type="checkbox" @change="applyRedBg"/>
            <label>红色背景</label><br/>
            <input type="checkbox" @change="applyBorderRadius"/>
            <label>圆角框</label><br/>
		</div>
	</body>

	<script type="text/javascript">		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'leco',
				classObj: {
                    bigFont: false,
                    redBg: false,
                    borderRadius: false
                }
			},
			methods: {
				applyBigFont(e) {
                    this.classObj.bigFont = e.target.checked
                },
                applyRedBg(e) {
                    this.classObj.redBg = e.target.checked
                },
                applyBorderRadius(e) {
                    this.classObj.borderRadius = e.target.checked
                },
			},
		})
	</script>
	
</html>

效果(默认):

当三个复选框都勾选后的效果:

数组写法

适用场景

要绑定多个样式，个数不确定，名字也不确定。

举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定class样式-数组写法</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			.bigFont{
                font-size: 30px;
            }
			.redBg{
				background-color: red;
			}
            .borderRadius{
                border-radius: 20px;
            }
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div class="basic" :class="classArr">你好, {{name}}</div>
		</div>
	</body>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'leco',
				classArr: ['bigFont', 'redBg', 'borderRadius']
			}
		})
	</script>
</html>

tips: 可以看到, 这里稍加改动也能达到对象写法举例中的效果, 但是对数组的操作相对会比较麻烦。
使用数组写法的好处是, 你可能有个div一开始初始绑定几个class, 后续需要动态的添加若干个class, 这种场景你只需要后续向classArr中添加新的元素即可。
但是由于数组本身的特性, 后续只是添加元素会比较好用, 如果还需要经常删除元素, 则不建议使用数组写法, 使用对象写法是个更好的选择。

绑定style样式

写法

<div :style="xxx"></div>

xxx可以是 样式对象 或者数组, 当xxx是数组时, 数组的每个元素需要是一个样式对象。

样式对象举例:

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            xxx:{
                fontSize: '20px',
                color: 'red',
                backgroundColor: 'blue'
            }
        }
    })
</script>