cssobj

Vue躬行记(3)——样式和表单

穿精又带淫゛_ 提交于 2020-04-25 17:03:17
  Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串、对象或数组,也可以是复杂的计算属性。不仅如此,Vue还为表单设计了一些语法糖,让表单处理变得尤为简单。 一、CSS类   v-bind指令与class参数配合,就能处理CSS类,并且能接收多种类型的值。 1)对象   v-bind:class可以接收一个对象,对象的属性名就是CSS类名,只有当其值是真值时,才能添加到DOM元素上,否则会被忽略。下面的<p>元素会接收数据对象中的classList,它包含两个属性warning和cur,其中cur属性保存了一个假值。 < p v-bind:class ="classList" > strick </ p > < script > var vm = new Vue({  data: {   classList: { warning: true , cur: "" }  } }); </ script >   渲染出的<p>元素如下所示,不包含cur类。 < p class ="warning" > strick </ p >   此外,v-bind:class可简写成:class,并且能与普通的class特性共存,如下所示。 < p :class =