Vue对DOM元素的class和style两个特性做了专门的增强&＃xff0c;即对CSS类和内联样式做了一层封装&＃xff0c;通过v-bind指令来处理它们&＃xff0c;而接收的表达式既可以是简单的字符串、对象或数组&＃xff0c;也可以是复杂的计算属性。不仅如此&＃xff0c;Vue还为表单设计了一些语法糖&＃xff0c;让表单处理变得尤为简单。
一、CSS类
v-bind指令与class参数配合&＃xff0c;就能处理CSS类&＃xff0c;并且能接收多种类型的值。
1&＃xff09;对象
v-bind:class可以接收一个对象&＃xff0c;对象的属性名就是CSS类名&＃xff0c;只有当其值是真值时&＃xff0c;才能添加到DOM元素上&＃xff0c;否则会被忽略。下面的
元素会接收数据对象中的classList&＃xff0c;它包含两个属性warning和cur&＃xff0c;其中cur属性保存了一个假值。
渲染出的
元素如下所示&＃xff0c;不包含cur类。
此外&＃xff0c;v-bind:class可简写成:class&＃xff0c;并且能与普通的class特性共存&＃xff0c;如下所示。
2&＃xff09;数组
当v-bind:class接收一个数组时&＃xff0c;其元素既可以是CSS类名&＃xff0c;也可以是对象&＃xff0c;格式与之前相同&＃xff0c;如下所示。
二、内联样式
v-bind指令与style参数配合&＃xff0c;就能避免通过字符串拼接的方式来处理内联样式&＃xff0c;并且也能接收多种类型的值。
1&＃xff09;对象
v-bind:style可以接收一个对象&＃xff0c;对象的属性名有两种命名方式&＃xff1a;驼峰式和连字符分隔式&＃xff0c;第二种就是层叠样式表中的CSS属性的命名方式。下面的
元素会接收数据对象中的cssObj&＃xff0c;其属性采用了两种命名方式。
渲染出的
元素如下所示。
Vue允许为属性赋一个包含多个值的数组&＃xff08;即多重值&＃xff09;&＃xff0c;可让浏览器选择支持的属性&＃xff0c;例如定义不同阶段的伸缩盒样式&＃xff0c;如下所示。
2&＃xff09;数组
当v-bind:style接收一个数组时&＃xff0c;其元素就是样式对象&＃xff0c;并且如果出现同名的CSS属性&＃xff0c;那么后面的会覆盖前面的。例如下面的cssObj1和cssObj2两个对象都包含line-height属性&＃xff0c;而最终渲染出的值为1.5。
3&＃xff09;浏览器前缀
Vue会自动侦测浏览器样式的兼容性&＃xff0c;并根据需要为CSS属性&＃xff08;例如border-radius、transform等&＃xff09;添加相应的浏览器前缀。
下面的代码摘自Vue.js&＃xff0c;其中camelize()函数可将连字符分隔式的字符串转换成驼峰式的字符串&＃xff1b;vendorNames变量记录了三种浏览器前缀&＃xff1b;normalize()函数会判断传入的属性是否存在于
元素的style属性中&＃xff0c;如果不存在&＃xff0c;就为其添加浏览器前缀&＃xff0c;而之所以单独处理filter属性是因为Chrome的一个bug&＃xff0c;虽然Chrome只支持-webkit-filter属性&＃xff0c;但是style属性中保存的却是无前缀的filter。
var camelizeRE &＃61; /-(w)/g;
var camelize &＃61; cached(function(str) {return str.replace(camelizeRE, function(_, c) {return c ? c.toUpperCase() : "";});
});var vendorNames &＃61; ["Webkit", "Moz", "ms"];
var emptyStyle;
var normalize &＃61; cached(function(prop) {emptyStyle &＃61; emptyStyle || document.createElement("div").style;prop &＃61; camelize(prop);if (prop !&＃61;&＃61; "filter" && prop in emptyStyle) {return prop;}var capName &＃61; prop.charAt(0).toUpperCase() &＃43; prop.slice(1);for (var i &＃61; 0; i });
三、表单
Vue提供了v-model指令&＃xff0c;可在表单控件上实现双向数据绑定&＃xff0c;即修改控件的值&＃xff0c;也会自动更新Vue实例中所对应的数据对象的属性&＃xff0c;反之亦然。
1&＃xff09;v-model
下面用一个示例来演示v-model指令的用法&＃xff0c;文本框的初始值是“strick”&＃xff0c;当修改元素中的值时&＃xff0c;
元素的文本也会随之更新。
而如果在控制台执行下面这条赋值语句&＃xff0c;那么就会更新元素中的值&＃xff0c;其实这就是Vue的双向数据绑定所起的作用。
在使用v-model指令时需要注意&＃xff0c;表单控件的初始值得声明在数据对象的属性中&＃xff0c;而不是value、checked或selected这些特性中。还是以之前的文本框为例&＃xff0c;添加了一个value特性&＃xff0c;如下所示&＃xff0c;渲染出的控件值将是“strick”&＃xff0c;而不是“init”。
v-model本质上是个语法糖&＃xff0c;它在内部会监听表单控件相关特性的变化&＃xff0c;并触发相应的事件&＃xff0c;其对应关系如表4所示。
表4 v-model指令内部的对应关系2&＃xff09;表单控件
将v-model指令作用于表单控件时&＃xff0c;其初始值常用的类型会有所不同&＃xff0c;如下所示。
var vm &＃61; new Vue({data: {name: "", //文本框&＃xff08;单行和多行&＃xff09;checked: true, //一个复选框names: [], //多个复选框color: "", //单选框selected: "", //选择框&＃xff08;单选&＃xff09;selecteds: [] //选择框&＃xff08;多选&＃xff09;}
});
当只使用一个复选框时&＃xff0c;v-model指令可绑定一个布尔值&＃xff1b;而当使用多个复选框时&＃xff0c;v-model指令适合绑定数组&＃xff0c;如下所示。
单选框与复选框不同&＃xff0c;由于它只能选中一个值&＃xff0c;因此不适合绑定数组&＃xff0c;如下所示。
选择框的multiple特性能控制其是否多选&＃xff0c;而这也会决定是否需要绑定数组&＃xff0c;如下所示。
3&＃xff09;值绑定
单选框、复选框和选择框的值原先只能是字符串或布尔值&＃xff0c;而通过v-bind指令就能让它们绑定任意类型的值&＃xff0c;如下所示&＃xff0c;为两个单选框的value特性绑定了一个对象。当选中其中一个按钮时&＃xff0c;color属性的值就会更新成绑定的对象。
复选框包含两个特殊的特性&＃xff1a;true-value和false-value&＃xff08;如下代码所示&＃xff09;&＃xff0c;当将其选中时&＃xff0c;toggle属性会更新为yes属性的值&＃xff0c;否则更新为no属性的值。
4&＃xff09;修饰符
Vue为v-model指令提供了3个修饰符&＃xff0c;如下所列&＃xff0c;每个修饰符后面都给出了相应的示例。
&＃xff08;1&＃xff09;.lazy修饰符能将同步输入值的事件从input替换成change&＃xff0c;以下面的文本框为例&＃xff0c;只有当修改其值并失去焦点时&＃xff0c;才会更新数据对象的name属性。
&＃xff08;2&＃xff09;.number修饰符能让输入值自动转换成数字&＃xff0c;常与number类型的文本框配合使用。
&＃xff08;3&＃xff09;.trim修饰符能过滤输入值的首尾空格。
京公网安备 11010802041100号