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="classList" class="size">strick</p>
2)数组
当 v-bind:class 接收一个数组时, 其元素既可以是 CSS 类名, 也可以是对象, 格式与之前相同, 如下所示.
- <p :class="[classList, cur]">strick</p>
- <script>
- var vm = new Vue({
- data: {
- classList: {
- warning: true
- },
- cur: "cur"
- }
- });
- </script>
二, 内联样式
v-bind 指令与 style 参数配合, 就能避免通过字符串拼接的方式来处理内联样式, 并且也能接收多种类型的值.
1)对象
v-bind:style 可以接收一个对象, 对象的属性名有两种命名方式: 驼峰式和连字符分隔式, 第二种就是层叠样式表中的 CSS 属性的命名方式. 下面的 < p > 元素会接收数据对象中的 cssObj, 其属性采用了两种命名方式.
- <p :style="cssObj">strick</p>
- <script>
- var vm = new Vue({
- data: {
- cssObj: {
- "fontSize": "30px",
- "line-height": 2
- }
- }
- });
- </script>
渲染出的 < p > 元素如下所示.
<p style="font-size: 30px; line-height: 2;">strick</p>
Vue 允许为属性赋一个包含多个值的数组(即多重值), 可让浏览器选择支持的属性, 例如定义不同阶段的伸缩盒样式, 如下所示.
<p :style="{display: ['-webkit-box','-ms-flexbox','flex']}">strick</p>
2)数组
当 v-bind:style 接收一个数组时, 其元素就是样式对象, 并且如果出现同名的 CSS 属性, 那么后面的会覆盖前面的. 例如下面的 cssObj1 和 cssObj2 两个对象都包含 line-height 属性, 而最终渲染出的值为 1.5.
- <p :style="[cssObj1, cssObj2]">strick</p>
- <script>
- var vm = new Vue({
- data: {
- cssObj1: {
- "fontSize": "30px",
- "line-height": 2
- },
- cssObj2: {
- "line-height": 1.5
- }
- }
- });
- </script>
3)浏览器前缀
Vue 会自动侦测浏览器样式的兼容性, 并根据需要为 CSS 属性 (例如 border-radius,transform 等) 添加相应的浏览器前缀.
下面的代码摘自 vue.js, 其中 camelize()函数可将连字符分隔式的字符串转换成驼峰式的字符串; vendorNames 变量记录了三种浏览器前缀; normalize()函数会判断传入的属性是否存在于 < div > 元素的 style 属性中, 如果不存在, 就为其添加浏览器前缀, 而之所以单独处理 filter 属性是因为 Chrome 的一个 bug, 虽然 Chrome 只支持 - webkit-filter 属性, 但是 style 属性中保存的却是无前缀的 filter.
- var camelizeRE = /-(\w)/g;
- var camelize = cached(function(str) {
- return str.replace(camelizeRE, function(_, c) {
- return c ? c.toUpperCase() : "";
- });
- });
- var vendorNames = ["Webkit", "Moz", "ms"];
- var emptyStyle;
- var normalize = cached(function(prop) {
- emptyStyle = emptyStyle || document.createElement("div").style;
- prop = camelize(prop);
- if (prop !== "filter" && prop in emptyStyle) {
- return prop;
- }
- var capName = prop.charAt(0).toUpperCase() + prop.slice(1);
- for (var i = 0; i <vendorNames.length; i++) {
- var name = vendorNames[i] + capName;
- if (name in emptyStyle) {
- return name;
- }
- }
- });
三, 表单
Vue 提供了 v-model 指令, 可在表单控件上实现双向数据绑定, 即修改控件的值, 也会自动更新 Vue 实例中所对应的数据对象的属性, 反之亦然.
1)v-model
下面用一个示例来演示 v-model 指令的用法, 文本框的初始值是 "strick", 当修改 < input > 元素中的值时,<p > 元素的文本也会随之更新.
- <input type="text" v-model="name"/>
- <p>{{name}}</p>
- <script>
- var vm = new Vue({
- data: {
- name: "strick"
- }
- });
- </script>
而如果在控制台执行下面这条赋值语句, 那么就会更新 < input > 元素中的值, 其实这就是 Vue 的双向数据绑定所起的作用.
vm.name = "freedom";
在使用 v-model 指令时需要注意, 表单控件的初始值得声明在数据对象的属性中, 而不是 value,checked 或 selected 这些特性中. 还是以之前的文本框为例, 添加了一个 value 特性, 如下所示, 渲染出的控件值将是 "strick", 而不是 "init".
<input type="text" v-model="name" value="init"/>
v-model 本质上是个语法糖, 它在内部会监听表单控件相关特性的变化, 并触发相应的事件, 其对应关系如表 4 所示.
表 4 v-model 指令内部的对应关系
表单控件 | 监听特性 | 触发事件 |
文本框(单行和多行) | value | input |
单选框和复选框 | checked | change |
选择框 | <option> 子元素中的 value | change |
2)表单控件
将 v-model 指令作用于表单控件时, 其初始值常用的类型会有所不同, 如下所示.
- var vm = new Vue({
- data: {
- name: "", // 文本框(单行和多行)
- checked: true, // 一个复选框
- names: [], // 多个复选框
- color: "", // 单选框
- selected: "", // 选择框(单选)
- selecteds: [] // 选择框(多选)
- }
- });
当只使用一个复选框时, v-model 指令可绑定一个布尔值; 而当使用多个复选框时, v-model 指令适合绑定数组, 如下所示.
- <input type="checkbox" v-model="checked" />
- <input type="checkbox" value="strick" v-model="names" />
- <input type="checkbox" value="freedom" v-model="names" />
单选框与复选框不同, 由于它只能选中一个值, 因此不适合绑定数组, 如下所示.
- <input type="radio" value="red" v-model="color" />
- <input type="radio" value="black" v-model="color" />
选择框的 multiple 特性能控制其是否多选, 而这也会决定是否需要绑定数组, 如下所示.
- <select v-model="selected">
- <option value="1">strick</option>
- <option value="2">freedom</option>
- </select>
- <select v-model="selecteds" multiple>
- <option value="1">strick</option>
- <option value="2">freedom</option>
- </select>
3)值绑定
单选框, 复选框和选择框的值原先只能是字符串或布尔值, 而通过 v-bind 指令就能让它们绑定任意类型的值, 如下所示, 为两个单选框的 value 特性绑定了一个对象. 当选中其中一个按钮时, color 属性的值就会更新成绑定的对象.
- <input type="radio" v-model="color" :value="{digit: 1}" />
- <input type="radio" v-model="color" :value="{digit: 2}" />
复选框包含两个特殊的特性: true-value 和 false-value(如下代码所示), 当将其选中时, toggle 属性会更新为 yes 属性的值, 否则更新为 no 属性的值.
- <input type="checkbox" v-model="toggle" :true-value="yes" :false-value="no" />
- <script>
- var vm = new Vue({
- data: {
- toggle: 1,
- yes: 1,
- no: 0
- }
- });
- </script>
4)修饰符
Vue 为 v-model 指令提供了 3 个修饰符, 如下所列, 每个修饰符后面都给出了相应的示例.
(1).lazy 修饰符能将同步输入值的事件从 input 替换成 change, 以下面的文本框为例, 只有当修改其值并失去焦点时, 才会更新数据对象的 name 属性.
<input type="text" v-model.lazy="name" />
(2).number 修饰符能让输入值自动转换成数字, 常与 number 类型的文本框配合使用.
<input type="number" v-model.number="age" />
(3).trim 修饰符能过滤输入值的首尾空格.
<input type="text" v-model.trim="school" />
posted on 2019-10-21 08:33 咖啡机(K.F.J) 阅读(...) 评论(...) 编辑 收藏
来源: https://www.cnblogs.com/strick/p/11331410.html