10-Vue基础学习笔记---CSS与Style绑定

it2025-03-23 9

10-CSS与Style绑定

绑定HTML Class对象语法数组语法用在组件上绑定内联样式对象语法数组语法

操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们是属性，所以可以使用v-bind来处理它们，但是字符串拼接麻烦并且容易出错，因此在将v-bind用于Class和Style的时候，vue.js做了专门的增强，表达式的类型除了字符串外，还可以是对象和数组。

绑定HTML Class

v-bind:class='表达式’ 或者 :class='表达式’class的表达式可以为：字符串、对象、数组、字符串表达式

注意： :class="[’’]" 注意要加上单引号，不然是获取data中的值

对象语法

可以传递给v-bind:class一个对象，以动态地切换class：

上面的语法表示active这个class存在与否将取决于数据属性isActive的值，你也可以在对象中传入更多的属性来动态切换多个class：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .active { color: green; } .delete { text-decoration: line-through; } </style> </head> <body> <div id="app"> <p v-bind:class="{active: isActive, delete: isDelete}">这里是一段文本</p> <button @click.prevent="isDelete = !isDelete">切换</button> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script> let app = new Vue({ data: { isActive : true, isDelete : true }, }).$mount("#app"); </script> </body> </html>

此外，v-bind:class指令也可以与普通的class属性共存，例如：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .active { color: green; } .delete { text-decoration: line-through; } .fontS { font-size: 30px; } </style> </head> <body> <div id="app"> <p v-bind:class="{active: isActive, delete: isDelete}" class="fontS">这里是一段文本</p> <button @click.prevent="isDelete = !isDelete">切换</button> </div> <script src="./vue.min.js"></script> <script> let app = new Vue({ data: { isActive : true, isDelete : true }, }).$mount("#app"); </script> </body> </html>

绑定的数据对象不必内联定义在模板里，下面的做法也可以：

在data选项中定义一个对象绑定一个返回对象的计算属性使用方法返回一个对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .delete { text-decoration: line-through; } .error { color: red; } </style> </head> <body> <div id="app">  <p :class="classComputed">计算属性</p>  <p :class="classData">数据对象</p>  <p :class="classMethod()">方法返回对象</p> <button @click="changeStatus">切换状态</button> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script> let app = new Vue({ data: { isError : true, isDelete : true, classData: { delete: true, error: true } }, methods: { classMethod() { return { delete: this.isDelete, error: this.isError } }, changeStatus () { this.isDelete = !this.isDelete; this.isError = !this.isError; this.classData.delete = !this.classData.delete; this.classData.error = !this.classData.error; } }, computed: { classComputed () { return { delete: this.isDelete, error: this.isError } } }, }).$mount("#app"); </script> </body> </html>

数组语法

可以把一个数组传给v-bind:class，以应用一个class列表：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .delete { text-decoration: line-through; } .error { color: red; } </style> </head> <body> <div id="app"> <p :class="['delete','error']">数组的方式</p> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script> let app = new Vue({ }).$mount("#app"); </script> </body> </html>

如果你也想根据条件切换到列表中的class，可以使用三元表达式：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .delete { text-decoration: line-through; } .error { color: red; } </style> </head> <body> <div id="app"> <p :class="[isDelete ? 'delete' : '','error']">数组的方式</p> <button @click="isDelete = !isDelete">切换</button> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script> let app = new Vue({ data: { isDelete: true } }).$mount("#app"); </script> </body> </html>

也可以在数组中使用对象语法：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .delete { text-decoration: line-through; } .error { color: red; } </style> </head> <body> <div id="app"> <p :class="[{delete : isDelete},'error']">数组的方式</p> <button @click="isDelete = !isDelete">切换</button> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script> let app = new Vue({ data: { isDelete: true } }).$mount("#app"); </script> </body> </html>

用在组件上

当在一个自定义组件上使用class属性的时候，这些class将被添加到该组件的根元素上面，这个元素上已经存在的class不会被覆盖：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .delete { text-decoration: line-through; } .error { color: red; } .active { font-size: 30px; } </style> </head> <body> <div id="app"> <my-component :class="[{delete: isDelete}, 'active']"></my-component> <button @click="isDelete = !isDelete">切换</button> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script> Vue.component('my-component', { template: ` <div class="error"><p>组件里面的内容</p></div> ` }) let app = new Vue({ data: { isDelete: true } }).$mount("#app"); </script> </body> </html>

绑定内联样式

对象语法

v-bind:style的对象语法十分直观，看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以使用驼峰或者短横线（记得使用引号括起来）来命名：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div id="app"> <p :style="{color: redColor, fontSize: fontSize + 'px'}">这里是一段文本</p> <p :style="{color: redColor, 'font-size': fontSize + 'px'}">这里是另外一段文本</p> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script> let app = new Vue({ data: { redColor: 'red', fontSize: 30 } }).$mount("#app"); </script> </body> </html>

也可以使用下面的方式：

使用数据选项给定一个对象使用计算属性返回一个对象使用方法返回一个对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div id="app"> <p :style="styleMethod()">方法返回</p> <p :style="styleData">数据选项返回</p> <p :style="styleComputed">计算属性返回</p> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script> let app = new Vue({ data: { redColor: 'red', fontSize: 30, styleData: { color: 'red', fontSize: 40 + 'px' } }, methods: { styleMethod() { return { color: this.redColor, fontSize: this.fontSize + 'px' } } }, computed: { styleComputed() { return { color: this.redColor, fontSize: this.fontSize + 'px' } } }, }).$mount("#app"); </script> </body> </html>

数组语法

v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div id="app"> <p :style="[activeStyle, errorStyle]">数组用法</p> </div> <script src="./node_modules/vue/dist/vue.min.js"></script> <script> let app = new Vue({ data: { activeStyle: { color: 'red' }, errorStyle : { 'font-size': '40px' } }, }).$mount("#app"); </script> </body> </html>

注意：

自动添加前缀：当v-bind:style使用需要添加浏览器引擎前缀的css属性时，如：transform，Vue.js会自动检测并添加相应的前缀。多重值：从2.3.0起你可以为style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如： // 这样写只会渲染数组中最后一个被浏览器支持的值 <div :style="{display: ['-webkit-box','-ms-flexbox','flex']}"></div>

最新回复(0)