789. 数的范围
Posted tomori
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了789. 数的范围相关的知识,希望对你有一定的参考价值。
1.概念
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 javascript 表达式的尾部,由“管道”符号(|)指示。
2.语法
2.1调用过滤器的格式
其中 | 表示管道符,管道符前面的为数据,管道符后面的为过滤器,使用过程中数据会传递给过滤器的处理函数,最终将处理的结果返回。
- 插值表达式
<h3>{{ 数据 | 过滤器名称(‘arg1‘, ‘arg2‘)) }}</h3>
- v-bind 表达式
<h3 v-text="数据|过滤器名称"></h3>
2.2.定义一个过滤器
定义过滤器需要2个关键参数 过滤器名称 和 处理函数。处理函数 用于过滤器的数据处理,函数的第一个参数固定为过滤器调用时传递的数据,后面参数依次为调用过滤器时传递的参数
- 全局过滤器
关键字:filter
挂载到全局的 Vue 上,Vue 的实例对象都可以使用,如:vm1、vm2......等都可以使用
Vue.filter("过滤器名称", function(data, arg1, arg2){ return data+arg1+arg2 }) var vm1 = new Vue({ el: "#app" }) var vm2 = new Vue({ el: "#app" })
- 私有过滤器
关键字:filters
挂载到一个 Vue 实例上,只有该 Vue 实例可以使用,如:只有vm实例可以使用
var vm = new Vue({ el: "#app", filters: { 过滤器名称: function(data, arg1, arg2){ return data+arg1+arg2 } } })
注意:过滤器的调用采用就近原则,如果 私有过滤器 和全局过滤器 名称一致,优先采用私有过滤器
3.过滤器使用
以下将使用全局过滤器展示多个过滤器使用场景。
3.1.全局过滤器
- 无参数过滤器
<div id="app"> <h3>{{ msg | msgFormat1 }}</h3> </div> <script> // 1.无参数过滤器 Vue.filter(‘msgFormat1‘, function(data) { return data.replace(/今天/g, ‘明天‘) }) var vm = new Vue({ el: ‘#app‘, data: { msg: ‘今天天气很好,我们今天去购物吧。‘ } }) </script>
- 带参数过滤器
<div id="app"> <h3>{{ msg | msgFormat2(‘周末‘) }}</h3> </div> <script> // 2.带参数过滤器 Vue.filter(‘msgFormat2‘, function(data, arg) { return data.replace(/今天/g, arg) }) var vm = new Vue({ el: ‘#app‘, data: { msg: ‘今天天气很好,我们今天去购物吧。‘ } }) </script>
- 多个过滤器
<div id="app"> <h3>{{ msg | msgFormat2(‘国庆节‘) | msgFormat3 }}</h3> </div> <script> // 3.多个过滤器 Vue.filter(‘msgFormat3‘, function(data) { return data + ‘那一定很愉快。‘ }) var vm = new Vue({ el: ‘#app‘, data: { msg: ‘今天天气很好,我们今天去购物吧。‘ } }) </script>
3.2.私有过滤器
<div id="app"> <p>今天的日期是:{{ date | dateFormat }}</p> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { date: new Date() }, filters: { dateFormat: function(date) { var time = new Date(date) var year = time.getFullYear() var month = time.getMonth().toString().padStart(2, 0) var day = time.getDay().toString().padStart(2, 0) var hours = time.getHours() var minutes = time.getMinutes().toString().padStart(2, 0) var seconds = time.getSeconds().toString().padStart(2, 0) return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` } } }) </script>
以上是关于789. 数的范围的主要内容,如果未能解决你的问题,请参考以下文章