本文实例讲述了vue.js数据绑定操作。分享给大家供大家参考，具体如下：

数据绑定

响应式的数据绑定系统。建立绑定之后，DOM将和数据保持同步，无须手动维护DOM。使代码能够更加简洁易懂、提升效率。

数据绑定语法

1.文本插值

{{ }}Mustache标签

单次插值

首次赋值后再更改vm实例属性值不会引起DOM的变化

2.HTML属性

Mustache标签{{ }}

简写：

3.绑定表达式

放在Mustache标签内的文本内容。除了直接输出属性值之外，一段绑定表达式可以由一个简单的JavaScript表达式和可选的一个或多个过滤器构成(不支持正则表达式，若需要复杂的转换，则使用过滤器或者计算属性来进行处理)。

4.过滤器

vue.js允许在表达式后添加可选的过滤器，以管道符"|"指示。

此时，filterA将name的值做为第一个参数，arg1，arg2做为第二、第三个参数传入过滤器函数中。

最终函数的返回值即为输出结果。arg1，arg2可以使用表达式，也可以加上单引号，直接传入字符串。

例如：

过滤器limitBy可以接受两个参数，第一个参数是设置显示个数，第二个参数为可选，指从开始元素的数组下标。

vue.js内置的10个过滤器(Vue.js2.0中去除)

自动添加数字分节号。

输出成符合json格式的字符串。

函数，参数可选，为{Number}[wait]，即延时时长。作用是当调用函数n毫秒后，才会执行该动作。

{Number}limit，{Number}[offset]，limit为显示个数，offset为开始显示数组下标。

{String | Function}targetStringOrFunction,即需要匹配的字符串或函数；"in"可选分隔符。{String}[...searchKeys]，为检索的属性区域。

使用自定义的过滤函数，函数可以在选项methods中定义

{String|Array|Function}sortKeys,即指定排序的策略。

单个键名：

多个键名：

自定义排序函数：

5.指令

指令的值限定为绑定表达式，即当表达式的值发生改变时，会有些特殊行为作用到绑定的DOM上。

参数：src为参数

<==>

修饰符：以半角句号.开始的特殊后缀，用于表示指令应该以特殊方式绑定。

计算属性

避免在模板中加入过重的业务逻辑，保证模版的结构清晰和可维护性。

1.基础例子

注：

2.Setter

更新属性时带来便利

表单控件

修改表单元素值时，实例vm中对应的属性值也同时更新，反之亦然。

1. Text

输入框示例，用户输入的内容和

2. Radio

单选框示例：

3.CheckBox

单个勾选框，

多个勾选框，属性名称，且属性为数组。

4.Select

单选

多选

5.绑定value

通过属性上。

CheckBox

选中：

未选中：

Radio

选中：

3.Select Options

选中：

6.参数特性

属性后会在change事件中同步。

自动将用户输入转为Number类型，如果原值转换结果为NaN，则返回原值。

自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

Class与Style绑定

1.Class绑定

对象语法：v-bind:class接受参数是一个对象，而且可以与普通的class属性共存。

vm实例中需要包含：

渲染结果为：

数组语法：v-bind:class也接受数组作为参数。

vm实例中需要包括：

渲染结果为：

使用三元表达式切换数组中的class

若

则渲染结果为

2.内联样式绑定(style属性绑定)

对象语法：直接绑定符合样式格式的对象。

vm实例中包含：

数组语法：v-bind:style允许将多个样式对象绑定到同一元素上。