Vue 过滤器与计算属性

时间:2023-01-18 23:58:12

过滤器

V1.x 版本

过滤器基础

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/api/#过滤器,过滤器通常会使用管道标志 “ | ”, 语法:

{{ msg | uppercase  }}

Vue自带的过滤器

1.Vue自带的过滤器:capitalize

功能:首字母大写
语法:{{message | capitalize}}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自带的过滤器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | capitalize}}
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: "abc"
}
})
</script>
</body>
</html>

2.Vue自带的过滤器:uppercase

功能:全部大写
语法: {{message | uppercase}}

3.Vue自带的过滤器:lowercase

功能:全部小写
语法:{{message | lowercase}}

4.Vue自带的过滤器:currency

功能:输出金钱以及小数点
参数: 第一个参数 {String} [货币符号] - 默认值: '$' 第二个参数 {Number} [小数位] - 默认值: 2 语法: {{message | currency '¥' "1"}} <!--输出$123.5-->

5.Vue自带的过滤器:pluralize

功能: 如果只有一个参数,复数形式只是简单地在末尾添加一个 “s”。如果有多个参数,参数被当作一个字符串数组,对应一个、两个、三个…复数词。如果值的个数多于参数的个数,多出的使用最后一个参数。

参数:{String} single, [double, triple, ...

 {{item | pluralize 'item'}} <!--输出: 1    item 2    items 3    items-->

6.Vue自带的过滤器:debounce

(1)限制: 需在@里面使用

(2)参数:{Number} [wait] - 默认值: 300

(3)功能:包装处理器,让它延迟执行 x ms, 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms, 如果在延迟结束前再次调用,延迟时长重置为 x ms。

<button id="btn" @click="disappear | debounce 10000">点击我,我将10秒后消失</button>

7.Vue自带的过滤器:limitBy

(1)限制:需在v-for(即数组)里面使用

(2)两个参数:

第一个参数:{Number} 取得数量

第二个参数:{Number} 偏移量

<ul v-for="item in lili | limitBy 10"> <!--输出1 2 3 4 5 6 7 8 9 10-->
<li>{{item}}</li>
</ul>

8.Vue自带的过滤器:filterBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: {String | Function} 需要搜索的字符串

第二个参数: in (可选,指定搜寻位置)

第三个参数: {String} (可选,数组格式)

 <ul v-for="item in man | filterBy 'l' in 'name' "> <!--输出lily lucy,含义输出name属性中含有l开头的名字-->
<li>{{item.name}}</li>
</ul>

9.Vue自带的过滤器:orderBy (1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: {String | Array<String> | Function} 需要搜索的字符串

第二个参数: {String} 可选参数 order 决定结果升序(order >= 0)或降序(order < 0),默认是升序

2.0版本过滤器

在Vue2.0版本中1.0自带过滤器均不可用,须采用自定义函数。官网提示:
Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用,因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换,你应该使用计算属性。
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})

过滤器可以串联:

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数,因此可以接受参数:

{{ message | filterA('arg1', arg2) }}

这里,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

过滤器项目应用总结

1.过滤器使用添加的全局的过滤器使用时,必须定义在 Vue实例初始化前面,否则过滤器定义无效!

Vue.filter("discount",function (value,discount) {
return value * (discount/100);
}); Vue.filter("discount1",function (value) {
return value * 100;
}); 2.对于子组件而言,父组件中自定义的过滤器在子组件中使用无效!可使用全局添加的过滤器或在子组件内部自定义过滤器! 子组件中添加自定义过滤器!
filters:{
discount:function (value,discount) {
return value *(discount / 100); //| discount(25) | discount1
},
discount1:function (value) {
return value * 100;
}
}
3.对于1.0版本中常用的自带过滤器 limitBy,filterBy,orderBy,可以分别采用分别用Array.slice,Array.filter和 Array.sort重写一遍并不复杂。

计算属性

使用场景

当模板中放入太多的逻辑,模板过重且难以维护时,你都应当使用计算属性。

基础例子

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
</script>
这里我们声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.reversedMessage 依赖于 vm.message ,因此当 vm.message 发生改变时,依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系:计算属性的 getter 是干净无副作用的,因此也是易于测试和理解的。

计算缓存 vs Methods

区别:不同的是计算属性是基于它的依赖缓存,而methods不依赖缓存,每一次都需要重新执行;
计算属性只有在它的相关依赖属性值发生改变时才会重新取值。 computed: {
now: function () {
return Date.now()
}
} 计算属性将不会更新,因为 Date.now() 不是响应式依赖; 我们为什么需要缓存?假设我们有一个重要的计算属性 A ,这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter !如果你不希望有缓存,请用 method 替代。

计算属性 vs Watched Property

区别:计算属性可以监听多个依赖属性发生变化时,去触发某一个执行函数(功能上更偏向与计算,数据的处理),而Watched Property 的本质是监听单一依赖属性发生变化时,获取该属性值变化时newVal oldVal触发执行函数(偏向于属性值得监听)

计算 setter

计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
} 现在在运行 vm.fullName = 'John Doe' 时, setter 会被调用, vm.firstName 和 vm.lastName 也会被对应更新。

观察 Watchers

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。

Vue 过滤器与计算属性的更多相关文章

  1. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  2. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  4. 关于vue&period;js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  5. vue学习笔记 计算属性(四)

    计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...

  6. 关于vue的使用计算属性VS使用计算方法的问题

    在vue中需要做一些计算时使用计算属性和调用methods方法都可以达到相同的效果,那么这两种使用方式的区别在哪里: <div id="example"> <p& ...

  7. vue&period;js实战——计算属性

    1set和get: 注意: this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题 练习代码如下: <!DOCTYPE html ...

  8. Vue基础之计算属性

    适用场景 设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题.看下面的例子: <!DOCTYPE html> ...

  9. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

随机推荐

  1. 【Prince2是什么】PRINCE2认证之项目四大管理步骤

    昨天谈到PRINCE2要求项目经理在做项目的时候要考虑四大核心指标(成本.时间.质量.范围)加风险与收益这两个重要要素. 然后PRINCE2基于这几大要素进行了四大管理步骤,分别是: 1.计划 2.授 ...

  2. 一个人java深入理解java logback配置

    http://blog.csdn.net/initphp/article/category/1230072/2

  3. 3&period;saltstack的grains和pillar学习笔记

    作者:刘耀 QQ:22102107 SaltStack_Grains Grains grains是minion第一次启动的时候采集的静态数据,可以用在salt的模块和其他组件中.其实grains在每次 ...

  4. 使用百度编辑器时,报错:从客户端&lpar;&quot&semi;&period;&period;&period;&rpar;中检测到有潜在危险的 Request&period;Form 值

    ajax请求失败,提交不上去 起初没找到报错的这句话,可能由于我用了其他第三方插件的原因,后来改动了一下,出现了这个错误 然后百度得到答案:http://www.cnblogs.com/tearer/ ...

  5. MySql下载安装&lpar;Mac平台&rpar; 终端启动 XMAPP启动

    1,下载 2,点击MySQL Community Server之后,然后看到需要注册登录的节目,我们就点击最下面just start my download直接下载.懒的注册或者登陆: 3.下载后,& ...

  6. PayPal网站付款标准版&lpar;for PHP&rpar;

    简单整理一下PHP项目整合PayPal支付功能. 一.表单的构建: <form method="post" name="form" action=&quo ...

  7. Atitit&period;Gui控件and面板----数据库区-mssql 2008 权限 配置 报表查看成员

    Atitit.Gui控件and面板----数据库区-mssql 2008 权限 配置 报表查看成员 1. 配置server连接权限 1 2. 配置数据库权限 1 3. 设置表格/视图安全性 2 1.  ...

  8. Java 中使用Jackson反序列化

    Build.gradle: compile group: 'org.codehaus.jackson', name: 'jackson-mapper-lgpl', version: '1.9.13' ...

  9. 微软Ajax--UpdatePanel控件

    今天用做日历显示本月的考勤记录,用到了UpdatePanel控件,才发现对这个控件并不太了解,所以找了点儿资料,整理了一下给大家发上来! 一.UpdatePanel的结构 <asp:Script ...

  10. 升级 WIN8&period;1 VC6&period;0和 Visual Assist 的使用问题

    抱着好奇之心, 升级到了win8.1,没想到win8下 64位机器,原本可以运行的vc6.0(也就是 MSDEV.EXE)不能运行之,然后各种不痛快了. 经过从网上搜索,找到了改良办法,没想到微软想把 ...