Vue样式绑定

发表于 2023-09-26 分类于前端开发

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。v-bind 在处理 class 和 style 时，表达式除了可以使用字符串之外，还可以是对象或数组。

class 属性绑定

这段代码是一个简单的 Vue 3 示例，演示了如何使用 Vue 的 v-bind 指令来绑定元素的 CSS 类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 属性绑定</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
</head>
<body>
<!--不使用vue绑定样式-->
<div class="active">div1容器</div>
	
<div id="app">
	<!--使用vue v-bind绑定样式-->
    <div :class="{'active': isActive }">div2容器</div>
</div>

<script>
const app = {
    data() {
      return {
         isActive: false
      }
   }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>

首先，页面加载时，会显示两个 <div> 元素。第一个 <div> 具有 class="active"，因此它在加载时将显示绿色背景。
使用 Vue 3，我们创建了一个名为 app 的 Vue 实例，该实例包含一个数据属性 isActive，初始值为 false。
在页面中，有一个 Vue 实例的根元素 <div id="app">，我们将在这里使用 Vue 来绑定样式。
在第二个 <div> 元素上，我们使用了 Vue 的 :class 绑定，将 {'active': isActive} 对象传递给 :class。这表示如果 isActive 的值为 true，则该元素将具有 active 类，从而应用绿色背景样式。
由于 isActive 的初始值为 false，因此在页面加载时，第二个 <div> 元素不会具有 active 类，因此它的背景不会是绿色的。
您可以通过点击按钮或通过其他方式来改变 isActive 的值，以动态地控制第二个 <div> 元素是否具有 active 类，从而改变其背景颜色。

。

条件样式

我们还可以使用三元表达式来切换列表中的 class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - t</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.static {
	width: 100px;
	height: 100px;
}
.active {
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
    <div class="static" :class="[isActive ? activeClass : '', errorClass]"></div>
</div>

<script>
const app = {
    data() {
        return {
            isActive: false,
			activeClass: 'active',
			errorClass: 'text-danger'
        }
    }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>

这段代码使用了 Vue 3 来动态绑定 CSS 类到一个 <div> 元素上。以下是代码的解释：

在 <style> 标签中定义了三个 CSS 类：
- .static：一个静态的类，设置了宽度和高度。
- .active：一个表示活跃状态的类，将元素背景设为绿色。
- .text-danger：一个表示危险状态的类，将元素背景设为红色。
在 Vue 实例的 data 选项中定义了三个属性：
- isActive：一个布尔属性，初始值为 false，用于表示活跃状态是否激活。
- activeClass：一个字符串属性，值为 'active'，表示活跃状态的 CSS 类名。
- errorClass：一个字符串属性，值为 'text-danger'，表示危险状态的 CSS 类名。
在模板中，通过 :class 绑定来动态设置元素的 CSS 类。具体地，使用了数组语法，根据 isActive 的值来决定应该应用哪些类。如果 isActive 为 true，则应用 activeClass 类，否则应用 errorClass 类。

绑定内联样式

我们可以在 v-bind:style 直接设置样式，可以简写为 :style。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - style</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <div :style="baseStyles">sutune</div>
</div>

<script>
const app = {
    data() {
        return {
			baseStyles: {
                color: 'green',
                font-Size: '30px'
            },
	      
        }
    }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>

上面代码演示了如何使用 Vue 的 :style 指令将动态样式应用于元素。在这里，定义了一个名为 baseStyles 的对象，该对象包含了一些 CSS 样式属性和值。

然后，将 baseStyles 对象绑定到 <div> 元素的 :style 属性上。这意味着 <div> 元素将使用 baseStyles 中定义的样式。在这个例子中，<div> 元素的文本内容为 “Sutune”，其样式将会被设置为：

文本颜色为绿色 (color: 'green')
字体大小为 30 像素 (fontSize: '30px')

这样，当运行这个代码时，<div> 元素的文本内容将以绿色字体显示，并且字体大小将被设置为 30 像素。这些样式是通过 baseStyles 对象动态设置的，可以根据需要随时更改。

组件上使用 class 属性

当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 组件绑定class属性</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<style>
	.classA{
		color:red;
	}	
	
	.classB{
		font-Size:60px;
	}
</style>
	
<body>
	
	
<div id="app">
    <runoob class="classA"></runoob>
</div>
 
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 runoob的新全局组件
app.component('runoob', {
    template: '<p class="classB">Hello Vue!</p>'
})
 
app.mount('#app')
</script>
</body>
</html>

执行后可以看到Hello Vue!文本具有classA和classB的样式。

1	<p class="classB classA">Hello Vue!</p>

$attrs 组件属性

如果你的组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - attrs</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.classA {
    color: red;
	font-size:30px;
}
	</style>
</head>
<body>
<div id="app">
    <runoob class="classA"></runoob>
</div>
 
<script>
const app = Vue.createApp({})
 
app.component('runoob', {
  template: `
    <p :class="$attrs.class">I like runoob!</p>
    <span>这是一个子组件</span>
  `
})
 
app.mount('#app')
</script>
</body>
</html>

代码解析：

在 <style> 部分，定义了一个 CSS 类名 .classA，它设置文本颜色为红色，字体大小为30像素。
在 HTML 中，有一个名为 app 的根元素，内部包含了一个自定义组件 <runoob>。这个组件具有 class 属性设置为 "classA"，这将会在组件内部使用。
使用 Vue 3 创建了一个应用程序，并定义了一个名为 runoob 的全局组件。该组件的模板中包含一个段落 <p>，它使用 $attrs.class 来动态绑定类名，因此会继承父组件传递的 class 属性。然后，在模板中还有一个 <span> 元素，它包含了一段文本。
最后，使用 app.mount('#app') 将 Vue 应用挂载到具有 id 为 app 的 DOM 元素上。