vue.js的计算、过滤、获取、设置的用法及区别详解

1、vue.js的计算方法：

处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值。用方法也可以实现同样的效果，但方法在重新渲染的时候会重新调用执行，在性能上计算优于方法，当不需要缓存时可用方法。

实例1:计算得出和方法实现翻转字符串

模板差异输入v-model='message' p原始字符串： {{ message }}/p p计算后反转字符串： {{ reversedMessage }}/p p使用方法后反转字符串： { { reversed message 2()} }/p/div/template script导出默认值{ data(){ return { message : ' Runoob123！'} }，computed: { //计算属性的getter reversedMessage:函数(){ //`this `指向伏特计实例返回this.message.split(').反转()。join("")}，methods : { reversed message 2: function(){ return this。消息。拆分("")。反转()。join(" " } } }/script执行结果：

实例2:计算的get()和设置()用法

模板差异选择v型='站点'选项值='谷歌http://www。谷歌。谷歌http://www.google.com/option选项值='百度http://www。百度。百度http://www.baidu.com/option公司选项值='网易http://www.163.com网易http://www.163.com/option/select pname:{ { name } }/p purl:{ { URL } }/p/div/template script导出默认{ data(){ return { name : ' Google '，URL : ' http://www。谷歌。com ' } }，computed : { site : } {//getter gett : function(){ return this。命名为“this”。URL }，//setter set :函数(新值){ let names=新值split(').执行结果：

2、vue.js的过滤器过滤器方法：

过滤器是将返回数据进行处理后返回处理结果的简单函数。可是在vue2.0版本被去掉了，替代方法是将函数写在方法里。

实例：

模板差异输入v-model=' filter text '/ul Li v-for=' obj ' span中的项{ {我的筛选器(项目。label)} }/span/Li/ul/div/template script导出默认值{ data(){ return { obj :[{ value :label: 'beijing'}，{ value: 1，label: 'shanghai'}，{ value: 2，label: '广东}，{ value执行结果：

3、vue.js的得到和设置方法：

某视频剪辑软件中数据属性能够响应数据变化内部是将数据的属性转换为吸气剂/设置剂，在vue2.0中，get()和设置()用于计算计算属性中，在上面的计算实例中已有涉及。另外从vue1.0中继承的虚拟机$set(对象、键、值)用于动态监控数据元素，在实例创建后添加数组属性并且有响应可用该方法实现。

模板差异输入v-model=' opt ' @ blur=' add()'/ul Li v-for=' arr '中的项{ item } }/Li/ul/div/template script导出默认{ data(){ return { arr :['北京', '上海', '广东', '深圳]，opt: '' } }，methods: { add () { this .$set(this.arr，this.arr.length，this.opt) } }}/script执行结果：

以上这篇vue.js的计算、过滤、获取、设置的用法及区别详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。