网站下载免费新版网站设置不安全
文章目录
- Vue3样式绑定
- 1. class 属性绑定
- 1.1 v-bind:class 设置一个对象，从而动态的切换 class
- 1.2 在对象中传入更多属性用来动态切换多个 class
- 1.3 直接绑定数据里的一个对象
- 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
- 1. 5 数据语法
- 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
- 2. Vue.js style(内联样式)
- 2.1 v-bind:style 直接设置样式
- 2.2 直接绑定到一个样式对象
- 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
- 2.4 多重值
- 3. 组件上使用 class 属性
- 3.1 带有单个根元素的自定义组件上使用 class 属性
- 3.2 组件有多个根元素
Vue3样式绑定
1. class 属性绑定
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。
v-bind:class 可以简写为 :class。
1.1 v-bind:class 设置一个对象，从而动态的切换 class
-
实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 v-bind:class 设置一个对象，从而动态的切换 class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script> <!-- 定义样式--><style>.active {width: 100px;height: 100px;background: green;}</style> </head> <body><!--定义一个名为app的div--><div id="app" class="demo"> <!-- 使用v-bind:class 在div中使用class属性 --> <!-- <div v-bind:class="{'active': isActive}"></div>--> <!-- v-bind:class可以缩写为 :class --><div :class="{'active': isActive}"></div> <!-- 静态绑定class--> <!-- <div class="active"></div>--></div><script> // 定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: true}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script> </body> </html>页面效果：
-
以上实例 div class 渲染结果为：
<div class="active"></div>
1.2 在对象中传入更多属性用来动态切换多个 class
-
:class指令也可以与普通的 class 属性共存 -
实例：
text-danger类背景颜色覆盖了 active 类的背景色：<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script> <!-- 定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style> </head> <body><!--定义一个名为app的div--><div id="app" class="demo"> <!-- 使用v-bind:class 在div中使用class属性 --> <!-- <div v-bind:class="{'active': isActive}"></div>--> <!-- v-bind:class可以缩写为 :class --><div :class="{'active': isActive, 'text-danger': hasError}" class="static"></div> <!-- 静态绑定class--> <!-- <div class="active"></div>--></div><script> // 定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: false,hasError: true}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script> </body> </html>页面效果：
-
以上实例 div class 渲染结果为：
<div class="text-danger static"></div>
-
当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为
"static active text-danger"。
1.3 直接绑定数据里的一个对象
-
text-danger 类背景颜色覆盖了 active 类的背景色
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 直接绑定数据里的一个对象</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script> <!-- 定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style> </head> <body><!--定义一个名为app的div--><div id="app" class="demo"> <!-- 使用v-bind:class 在div中使用class属性 --> <!-- <div v-bind:class="{'active': isActive}"></div>--> <!-- 直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div> <!-- 静态绑定class--> <!-- <div class="active"></div>--></div><script> // 定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// 返回类型为一个对象classObject: {// isActive为false则不显示// isActive: true,'active': false,'text-danger': true}}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script> </body> </html>页面效果：
-
以上实例 div class 渲染结果为：
<div class="text-danger static"></div>
-
- 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为
"static active text-danger"。
- 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为
1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
-
也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 绑定一个返回对象的计算属性。这是一个常用且强大的模式</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script> <!-- 定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style> </head> <body><!--定义一个名为app的div--><div id="app" class="demo"> <!-- 使用v-bind:class 在div中使用class属性 --> <!-- <div v-bind:class="{'active': isActive}"></div>--> <!-- 直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div> <!-- 静态绑定class--> <!-- <div class="active"></div>--></div><script> // 定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// 定义返回值isActive: true,error: null}},// 定义计算属性 为一个对象computed: {classObject () {// 定义对象返回值return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script> </body> </html>页面效果：
-
以上代码的渲染结果为：
<div class="active static"></div>
1. 5 数据语法
-
可以把一个数组传给 v-bind:class，实例如下:
<div :class="[activeClass, errorClass]" class="static"></div><!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 可以把一个数组传给 v-bind:class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script> <!-- 定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style> </head> <body><!--定义一个名为app的div--><div id="app" class="demo"> <!-- 使用v-bind:class 在div中使用class属性 --> <!-- <div v-bind:class="{'active': isActive}"></div>--> <!-- 直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[activeClass, errorClass]" class="static"></div> <!-- 静态绑定class--> <!-- <div class="active"></div>--></div><script> // 定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// 定义返回值activeClass: 'active',errorClass: 'text-danger'}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script> </body> </html>页面效果：
-
以上代码渲染结果：
<div class="active text-danger static"></div>
1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!-- 定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!-- 使用v-bind:class 在div中使用class属性 -->
<!-- <div v-bind:class="{'active': isActive}"></div>-->
<!-- 直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[isActive ? activeClass : errorClass]" class="static"></div>
<!-- 静态绑定class-->
<!-- <div class="active"></div>--></div><script>
// 定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// 定义返回值isActive: true,activeClass: 'active',errorClass: 'text-danger'}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>
页面效果：isActive为true显示绿色，isActive为false显示红色
-
以上实例的渲染结果:
<div class="active static"></div>
2. Vue.js style(内联样式)
2.1 v-bind:style 直接设置样式
- 可以在
v-bind:style直接设置样式，可以简写为:style
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!-- v-bind:style 直接设置样式 -->
<!-- <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!-- v-bind:style 直接设置样式 可以简写为 :style--><div :style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div></div><script>
// 定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {activeColor: 'red',fontSize: 30}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>
页面效果：
-
以上代码渲染结果为:
<div style="color: red; font-size: 30px;">v-bind:style 直接设置样式</div>
2.2 直接绑定到一个样式对象
-
也可以直接绑定到一个样式对象，让模板更清晰：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script> </head> <body><!--定义一个名为app的div--><div id="app" class="demo"> <!-- v-bind:style 直接设置样式 --> <!-- <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>--> <!-- v-bind:style 直接设置样式 可以简写为 :style--><div :style="styleObject">v-bind:style 绑定样式对象</div></div><script> // 定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// 设置返回结果为一个样式对象styleObject: {color: "red",fontSize: "30px"}}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script> </body> </html>页面效果：
-
以上代码的渲染结果：
<div style="color: red; font-size: 30px;">v-bind:style 绑定样式对象</div>
2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
-
v-bind:style 可以使用数组将多个样式对象应用到一个元素上
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 v-bind:style 可以使用数组将多个样式对象应用到一个元素上 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script> </head> <body><!--定义一个名为app的div--><div id="app" class="demo"> <!-- v-bind:style 直接设置样式 --> <!-- <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>--> <!-- v-bind:style 直接设置样式 可以简写为 :style--><div :style="[baseStyles, overridingStyle]">v-bind:style 绑定样式对象</div></div><script> // 定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// 设置返回结果为一个样式对象baseStyles: {color: "green",fontSize: "30px"},overridingStyle: {'font-weight': 'bold'}}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script> </body> </html>页面效果：
-
上述案例渲染结果：
<div style="color: green; font-size: 30px; font-weight: bold;">v-bind:style 绑定样式对象</div>
-
注意：当
v-bind:style使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
2.4 多重值
-
可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> -
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
3. 组件上使用 class 属性
3.1 带有单个根元素的自定义组件上使用 class 属性
-
当在带有单个根元素的
自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script> </head> <body><!--定义一个名为app的div--><div id="app" class="demo"> <!-- 使用自定义的全局组件runoob--><runoob class="classC classD"></runoob></div><script> // 定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})// 在HelloVueApp组件上创建一个新全局组件 // 在自定义组件上使用class属性，这些属性会被添加到该元素上HelloVueApp.component('runoob', {template: '<h1 class="classA classB">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>'})// 创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script> </body> </html>页面效果：
以上实例渲染结果：<h1 class="classA classB classC classD">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>
-
对于带数据绑定 class 也同样适用：
<my-component :class="{ active: isActive }"></my-component> -
当 isActive 为 true 时，HTML 将被渲染成为：
<p class="active">Hi</p>
3.2 组件有多个根元素
-
组件有多个根元素，需要定义哪些部分将接收这个类。可以使用
$attrs组件属性执行此操作template 中 ` 是反引号，不是单引号 ’
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 测试实例 组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script> </head> <body><!--定义一个名为app的div--><div id="app" class="demo"> <!-- 使用自定义的全局组件runoob--><runoob class="classA"></runoob></div><script> // 定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})// 在HelloVueApp组件上创建一个新全局组件 含多个根元素HelloVueApp.component('runoob', {template: `<p :class="$attrs.class">组件有多个根元素 使用 $attrs 组件属性执行此操作</p><span>这是runoob的子组件</span>`})// 创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script> </body> </html>页面效果：
-
以上代码渲染结果：
<p class="classA">组件有多个根元素 使用 $attrs 组件属性执行此操作</p> <span>这是runoob的子组件</span>