百城建设提质工程网站,小程序商城开发方案,辽源市网站建设,北京昌平区文章目录 Vue3样式绑定1. class 属性绑定1.1 v-bind:class 设置一个对象#xff0c;从而动态的切换 class1.2 在对象中传入更多属性用来动态切换多个 class1.3 直接绑定数据里的一个对象1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式1. 5 数据语法1.6 errorClass… 文章目录 Vue3样式绑定1. class 属性绑定1.1 v-bind:class 设置一个对象从而动态的切换 class1.2 在对象中传入更多属性用来动态切换多个 class1.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 headmeta charsetutf-8titleVue 测试实例 v-bind:class 设置一个对象从而动态的切换 class /titlescript srchttps://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 idapp classdemo !-- 使用v-bind:class 在div中使用class属性 -- !-- div v-bind:class{active: isActive}/div-- !-- v-bind:class可以缩写为 :class --div :class{active: isActive}/div !-- 静态绑定class-- !-- div classactive/div--/divscript // 定义Vue应用HelloVueAppconst HelloVueApp {data () {return {// isActive为false则不显示isActive: true}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount(#app)/script /body /html页面效果 以上实例 div class 渲染结果为 div classactive/div1.2 在对象中传入更多属性用来动态切换多个 class :class 指令也可以与普通的 class 属性共存 实例text-danger 类背景颜色覆盖了 active 类的背景色 !DOCTYPE html html headmeta charsetutf-8titleVue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存/titlescript srchttps://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 idapp classdemo !-- 使用v-bind:class 在div中使用class属性 -- !-- div v-bind:class{active: isActive}/div-- !-- v-bind:class可以缩写为 :class --div :class{active: isActive, text-danger: hasError} classstatic/div !-- 静态绑定class-- !-- div classactive/div--/divscript // 定义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 classtext-danger static/div当 isActive 或者 hasError 变化时class 属性值也将相应地更新。例如如果 active 的值为 trueclass 列表将变为 static active text-danger。 1.3 直接绑定数据里的一个对象 text-danger 类背景颜色覆盖了 active 类的背景色 !DOCTYPE html html headmeta charsetutf-8titleVue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 直接绑定数据里的一个对象/titlescript srchttps://cdn.staticfile.org/vue/3.2.37/vue.global.min.js/scriptscript srchttps://unpkg.com/vuenext/script !-- 定义样式--style.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}/style /head body!--定义一个名为app的div--div idapp classdemo !-- 使用v-bind:class 在div中使用class属性 -- !-- div v-bind:class{active: isActive}/div-- !-- 直接绑定对象 v-bind:class可以缩写为 :class --div :classclassObject classstatic/div !-- 静态绑定class-- !-- div classactive/div--/divscript // 定义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 classtext-danger static/div当 isActive 或者 hasError 变化时class 属性值也将相应地更新。例如如果 active 的值为 trueclass 列表将变为 static active text-danger。 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式 也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式 !DOCTYPE html html headmeta charsetutf-8titleVue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 绑定一个返回对象的计算属性。这是一个常用且强大的模式/titlescript srchttps://cdn.staticfile.org/vue/3.2.37/vue.global.min.js/scriptscript srchttps://unpkg.com/vuenext/script !-- 定义样式--style.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}/style /head body!--定义一个名为app的div--div idapp classdemo !-- 使用v-bind:class 在div中使用class属性 -- !-- div v-bind:class{active: isActive}/div-- !-- 直接绑定对象 v-bind:class可以缩写为 :class --div :classclassObject classstatic/div !-- 静态绑定class-- !-- div classactive/div--/divscript // 定义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 classactive static/div1. 5 数据语法 可以把一个数组传给 v-bind:class实例如下: div :class[activeClass, errorClass] classstatic/div!DOCTYPE html html headmeta charsetutf-8titleVue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 可以把一个数组传给 v-bind:class /titlescript srchttps://cdn.staticfile.org/vue/3.2.37/vue.global.min.js/scriptscript srchttps://unpkg.com/vuenext/script !-- 定义样式--style.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}/style /head body!--定义一个名为app的div--div idapp classdemo !-- 使用v-bind:class 在div中使用class属性 -- !-- div v-bind:class{active: isActive}/div-- !-- 直接绑定对象 v-bind:class可以缩写为 :class --div :class[activeClass, errorClass] classstatic/div !-- 静态绑定class-- !-- div classactive/div--/divscript // 定义Vue应用HelloVueAppconst HelloVueApp {data () {return {// 定义返回值activeClass: active,errorClass: text-danger}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount(#app)/script /body /html页面效果 以上代码渲染结果div classactive text-danger static/div 1.6 errorClass 是始终存在的isActive 为 true 时添加 activeClass 类 !DOCTYPE html html headmeta charsetutf-8titleVue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存errorClass 是始终存在的isActive 为 true 时添加 activeClass 类 /titlescript srchttps://cdn.staticfile.org/vue/3.2.37/vue.global.min.js/scriptscript srchttps://unpkg.com/vuenext/script !-- 定义样式--style.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}/style /head body!--定义一个名为app的div--div idapp classdemo !-- 使用v-bind:class 在div中使用class属性 -- !-- div v-bind:class{active: isActive}/div-- !-- 直接绑定对象 v-bind:class可以缩写为 :class --div :class[isActive ? activeClass : errorClass] classstatic/div !-- 静态绑定class-- !-- div classactive/div--/divscript // 定义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 classactive static/div 2. Vue.js style(内联样式) 2.1 v-bind:style 直接设置样式 可以在 v-bind:style 直接设置样式可以简写为 :style !DOCTYPE html html headmeta charsetutf-8titleVue 测试实例 v-bind:style 直接设置样式 /titlescript srchttps://cdn.staticfile.org/vue/3.2.37/vue.global.min.js/script /head body!--定义一个名为app的div--div idapp classdemo !-- 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/divscript // 定义Vue应用HelloVueAppconst HelloVueApp {data () {return {activeColor: red,fontSize: 30}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount(#app)/script /body /html页面效果 以上代码渲染结果为:div stylecolor: red; font-size: 30px;v-bind:style 直接设置样式/div 2.2 直接绑定到一个样式对象 也可以直接绑定到一个样式对象让模板更清晰 !DOCTYPE html html headmeta charsetutf-8titleVue 测试实例 v-bind:style 直接设置样式 /titlescript srchttps://cdn.staticfile.org/vue/3.2.37/vue.global.min.js/script /head body!--定义一个名为app的div--div idapp classdemo !-- v-bind:style 直接设置样式 -- !-- div v-bind:style{color: activeColor, fontSize: fontSize px}v-bind:style 直接设置样式/div-- !-- v-bind:style 直接设置样式 可以简写为 :style--div :stylestyleObjectv-bind:style 绑定样式对象/div/divscript // 定义Vue应用HelloVueAppconst HelloVueApp {data () {return {// 设置返回结果为一个样式对象styleObject: {color: red,fontSize: 30px}}}}// 创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount(#app)/script /body /html页面效果 以上代码的渲染结果div stylecolor: red; font-size: 30px;v-bind:style 绑定样式对象/div 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上 v-bind:style 可以使用数组将多个样式对象应用到一个元素上 !DOCTYPE html html headmeta charsetutf-8titleVue 测试实例 v-bind:style 可以使用数组将多个样式对象应用到一个元素上 /titlescript srchttps://cdn.staticfile.org/vue/3.2.37/vue.global.min.js/script /head body!--定义一个名为app的div--div idapp classdemo !-- 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/divscript // 定义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 stylecolor: 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 headmeta charsetutf-8titleVue 测试实例 当你在带有单个根元素的自定义组件上使用 class 属性时这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。 /titlescript srchttps://cdn.staticfile.org/vue/3.2.37/vue.global.min.js/scriptscript srchttps://unpkg.com/vuenext/script /head body!--定义一个名为app的div--div idapp classdemo !-- 使用自定义的全局组件runoob--runoob classclassC classD/runoob/divscript // 定义Vue应用HelloVueAppconst HelloVueApp Vue.createApp({})// 在HelloVueApp组件上创建一个新全局组件 // 在自定义组件上使用class属性这些属性会被添加到该元素上HelloVueApp.component(runoob, {template: h1 classclassA classB在自定义组件上使用class属性这些属性会被添加到该元素上/h1})// 创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount(#app)/script /body /html页面效果 以上实例渲染结果h1 classclassA classB classC classD在自定义组件上使用class属性这些属性会被添加到该元素上/h1 对于带数据绑定 class 也同样适用 my-component :class{ active: isActive }/my-component当 isActive 为 true 时HTML 将被渲染成为 p classactiveHi/p3.2 组件有多个根元素 组件有多个根元素需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作 template 中 是反引号不是单引号 ’ !DOCTYPE html html headmeta charsetutf-8titleVue 测试实例 组件有多个根元素你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作 /titlescript srchttps://cdn.staticfile.org/vue/3.2.37/vue.global.min.js/scriptscript srchttps://unpkg.com/vuenext/script /head body!--定义一个名为app的div--div idapp classdemo !-- 使用自定义的全局组件runoob--runoob classclassA/runoob/divscript // 定义Vue应用HelloVueAppconst HelloVueApp Vue.createApp({})// 在HelloVueApp组件上创建一个新全局组件 含多个根元素HelloVueApp.component(runoob, {template: p :class$attrs.class组件有多个根元素 使用 $attrs 组件属性执行此操作/pspan这是runoob的子组件/span})// 创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount(#app)/script /body /html页面效果 以上代码渲染结果 p classclassA组件有多个根元素 使用 $attrs 组件属性执行此操作/p span这是runoob的子组件/span