Vue过滤器与计算属性
原文地址：http://www.cnblogs.com/lolDragon/p/6247651.html过滤器V1.x 版本过滤器基础过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档，http://cn.vuejs.org/api/#过滤器，过滤器通常会使用管道标志 “| ”， 语法：
·
原文地址：http://www.cnblogs.com/lolDragon/p/6247651.html
过滤器
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），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献17条内容
所有评论(0)