什么网站做任务,外包服务商,电子商务网站的类型,一键建网站目录 前言过滤器的概念过滤器的基本使用给过滤器添加多个参数 前言 我们接着上一篇文章01-04.Vue的使用示例#xff1a;列表功能 来讲。 下一篇文章 02-Vue实例的生命周期函数 过滤器的概念
概念#xff1a;Vue.js 允许我们自定义过滤器#xff0c;可被用作一些常见的文本… 目录 前言过滤器的概念过滤器的基本使用给过滤器添加多个参数 前言 我们接着上一篇文章01-04.Vue的使用示例列表功能 来讲。 下一篇文章 02-Vue实例的生命周期函数 过滤器的概念
概念Vue.js 允许我们自定义过滤器可被用作一些常见的文本格式化。过滤器可以用在两个地方mustache 插值表达式、 v-bind表达式。过滤器应该被添加在 JavaScript 表达式的尾部由“管道”符指示。
过滤器的基本使用
比如说我要将data中msg 后面添加字符串。可以这样做
1在差值表达式中这样调用 p{{ msg | msgFormat }/p上方代码的意思是说 管道符前面的msg要把 msg 这段文本进行过滤 管道符后面的msgFormat是通过msgFormat这个过滤器进行来操作。
2定义过滤器msgFormat
// filter是过滤器的对象里面可以定义多个过滤器
// 定义一个过滤器名字叫做 msgFormat
filters: {msgFormat: function(msg){return msg 111111}
}上方代码解释 过滤器函数function中第一个参数指的管道符前面的msg。 return 返回的值可以直接在页面上显示
最终完整版代码如下
templatediv idapp{{ 22222 | msgFormat }}/div
/templatescript
export default {filters: {msgFormat: function(msg){return msg 111111}},data() {return {};},methods: {mySubmit: function () {alert(ok);},},
};
/script
网页显示效果如下 给过滤器添加多个参数
上面的举例代码中{{ msg | msgFormat }}中过滤器的调用并没有加参数其实它还可以添加多个参数。
接下来我们在上面的举例代码中进行改进。
改进一过滤器加一个参数。如下
将 msg 这个字符串进行拼接。代码如下
templatediv idapp!-- 【重要】通过 过滤器 msgFormat 对 msg 进行过滤。括号里的参数代表 function中的 arg2--p{{ msg | msgFormat(xxx) }}/p/div
/templatescript
export default {filters: {msgFormat: function(msg, arg2){return msg 111111 arg2}},data() {return {msg: 聆听感受思考};},methods: {mySubmit: function () {alert(ok);},},
};
/script
style
#app{color: black;
}
/style 注意代码中那行重要的注释括号里的参数代表 function中的 arg2。
