Vue过滤器的传参使用及案例

过滤器用于一些常见的文本格式化
过滤器的第二个参数为可选

使用位置

过滤器可以用在两个地方：双花括号插值{{ }}和 v-bind 表达式**

使用方法

{{ 变量 | 过滤器名 }}
{{ 变量 | 过滤器 | 另一个过滤器 }} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值
示例：

<!-- 在双花括号中 -->
{{ message | capitalize }}<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

定义语法

局部过滤器
示例：

  <div id="app"><div>{{ msg | setStr }}</div></div><script>new Vue({el: "#app",data() {return {msg: "效果实现了!!!"}},filters: {// 实现效果：替换文本setStr: function (value) {// 这里写一些逻辑处理并返回return value.replace("!!!", "")}}})</script>

全局过滤器
注意：局部是filters : { }，全局是 filter
示例：

  <script>Vue.filter("setStr", function (value) {// 这里写一些逻辑处理并返回return value.replace("!!!", "")})new Vue({}）</script>

过滤器实现传参

目的：截取字符串
注解：这里的 format = 4 为ES6语法，为参数赋默认值
substring() 方法返回的子串包括开始处的字符，但不包括结束处的字符。
示例：

  <div id="app"><div>{{msg}}</div> <!-- 原始值 abcdefgh--><div>{{msg | setStr}}</div> <!-- 这里的值为 efgh --><div>{{msg | setStr(1)}}</div> <!-- 这里的值为 bcdefgh--></div><script>// 全局Vue.filter("setStr", (data, format = 4) => {return data.substring(format)})new Vue({el: "#app",data() {return {msg: "abcdefgh"}},// 局部// filters: {//   setStr(data, format = 4) {//     return data.substring(format)//   }// }})</script>

总结

过滤器也可通过methods或计算属性实现，使用过滤器有时会更加方便

过滤器:定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理)。语法:1.注册过滤器: Vue.filter(name,callback)或new Vue{filters:{}}2.使用过滤器:{{ xxx | 过滤器名}}或v-bind:属性 =“xxx │ 过滤器名"备注:1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据,是产生新的对应的数据

Vue过滤器的传参使用及案例相关推荐

【Vue】路由传参方式
在使用params传递参数时,需要使用name来指定目标,否则会出现数据传输失败 vue的路由传参共有三种方式 1.query传参:不管使用path还是name来匹配路由都可以,然后通过query来传 ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
Vue 中路由传参（动态路由匹配）
一.解释把数据从一个路由页面传递到另外一个页面的技术这里列举了 params 和 query 的传参方式二.案例案例展示手机列表页传参到手机详情页面(传递的是id) ① params ...
vue 事件调用传参_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
vue 事件调用传参_Vue 事件如何传递参数？
Vue 事件如何传递参数? 事件函数参数传递: 普通参数和事件对象传递格式如下: 调用函数传参点秋香 vue事件绑定-参数传递实例如下: vue事件绑定-参数传递 xinbiancheng.cn { ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
Vue：路由传参的三种方式
文章目录前言方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...
vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...

Vue过滤器的传参使用及案例

Vue过滤器的传参使用及案例

使用位置

使用方法

定义语法

过滤器实现传参

总结

Vue过滤器的传参使用及案例相关推荐

最新文章

热门文章