Vue.js前端开发框架应用（微课版） 课件 第五章 Vue.js样式绑定.pptx

Vue.js前端开发框架应用

Vue.js样式绑定

目录Vue.js绑定样式通过数组绑定样式Vue.js绑定内联样式使用计算属性绑定样式

Vue.js样式绑定一、Vue.js绑定样式静态绑定样式静态绑定指的是直接使用v-bind:class（缩写为:class）指令将样式绑定到HTML元素的class属性，该方式等同于直接固定HTML元素的样式，是最基本的绑定样式方式。【案例5?1】直接绑定样式。

Vue.js样式绑定一、Vue.js绑定样式动态绑定样式Vue.js可以使用绑定对象或绑定数组的方式设置HTML元素的样式。绑定对象指的是给v-bind:class（缩写为:class）指令传递一个对象来动态设置HTML元素的样式。【案例5?2】绑定对象设置样式。案例中“bigFont”样式是否有效是由“useFont1”的值决定的，true为有效，false为无效。

Vue.js样式绑定一、Vue.js绑定样式动态绑定样式Vue.js可以使用绑定对象或绑定数组的方式设置HTML元素的样式。绑定对象指的是给v-bind:class（缩写为:class）指令传递一个对象来动态设置HTML元素的样式。【案例5?3】动态改变样式。

Vue.js样式绑定一、Vue.js绑定样式绑定多个样式Vue.js可以使用绑定对象或绑定数组的方式设置HTML元素的样式。采用:class指定绑定对象时可以为一个html元素同时绑定多个样式，并且可以动态指定哪些样式启用，哪些样式不启用。【案例5?4】绑定多个样式。:class指令绑定的对象可以有多个字段，每个字段对应样式名，字段的值决定该样式是否启用。

目录Vue.js绑定样式通过数组绑定样式Vue.js绑定内联样式使用计算属性绑定样式

Vue.js样式绑定二、通过数组绑定样式Vue.js支持绑定包含CSS样式的数组，通过:class指令绑定一个包含多个CSS样式或样式对象的数组，数组中的全部样式会被渲染到目标html元素【案例5?5】数组绑定样式。:class指令绑定数组，数组元素可以是样式名或表示样式的对象

目录Vue.js绑定样式通过数组绑定样式Vue.js绑定内联样式使用计算属性绑定样式

Vue.js样式绑定三、Vue.js绑定内联样式直接绑定内联样式:style指令可绑定包含内联样式的JavaScript对象，其对应的是html元素的style属性。【案例5?6】绑定内联样式。:style指令绑定含内联样式的对象，对象的字段是内联样式名，值是样式值。

Vue.js样式绑定三、Vue.js绑定内联样式通过数组绑定内联样式:style指令也持绑定一个包含多个内联样式JavaScript对象的数组，数组中的对象包含的内联样式会被合并后渲染到目标html元素上。【案例5?7】通过数组绑定内联样式。:style指令绑定数组，数组元素是内联样式对象。

目录Vue.js绑定样式通过数组绑定样式Vue.js绑定内联样式使用计算属性绑定样式

Vue.js样式绑定三、使用计算属性绑定样式:class和:style指令都支持使用计算属性绑定样式，采用计算属性后样式的绑定能更好的支持包含复杂程序逻辑的情况。【案例5?8】计算属性绑定样式。:class指令绑定的计算属性返回一个包含样式名的对象。:style指令绑定的计算属性内联样式对象。