Vue实例的四个常用选项

231 阅读1分钟

过滤器filters

在不改变的data的情况下输出前端页面需要的格式数据。例如将小数过滤为整数等。filters是一个对象,里边定义一个function方法,function传入一个参数,function的作用是对数据进行相关处理。

1167192-20170928193323700-1437190955.png

1167192-20170928194802247-1416571607.png

2. 计算属性 computed:

当数据需要经过处理计算后才能得到结果的,我们可以用这个属性。例如求和等。computed是一个对象,里边定义一个function方法,function传入一个参数,function的作用是对数据进行相关处理计算等。 计算属性 computed 用法更简洁。

1167192-20170928195855059-2110503869.png

1167192-20170928200116528-1441450985.png

3.方法 methods:

在 methods 中,我们可以定义一些方法供组件使用。例如给定一个数据num,实现点击按钮数据num+1,可以定义一个puls()方法在methods中,然后将puls()绑定在按钮的点击事件上;

1167192-20170928232918762-48503728.png 运行结果:

1167192-20170928234223559-587155410.png

点击加1按钮1次:

1167192-20170928234400512-850266723.png

再点击加1按钮1次:

1167192-20170928234519700-1703028834.png

4.观察watch:

watch是Vue提供的用于检测指定的数据发生改变的api,类似于事件监听。可以用methods中的例子来监听数字num。

1167192-20170928232918762-48503728.png

运行结果:

1167192-20170928234331950-1286473064.png

点击加1按钮1次:

1167192-20170928234449544-1156237447.png

再点击加1按钮1次:

1167192-20170928234709434-1153422233.png