vue学习笔记（一） ---- vue指令（过滤器）

一、什么是过滤器

官方文档：https://cn.vuejs.org/v2/guide/filters.html

二、过滤器的使用

没有使用过滤器之前：

<div id="app"><table><thead><tr><th>排名</th><th>菜名</th></tr></thead><tbody><tr v-for="item in list" :key="item.id"><td>{{ item.id }}</td><td>{{ item.name}}</td></tr></tbody></table>
</div>

<script>var vm = new Vue({el: '#app',data: {list: [{ id: 1, name: '黄焖鸡' },{ id: 2, name: '烤鱼'},{ id: 3, name: '鸭血粉丝'},{ id: 4, name: '大碗米线' },{ id: 5, name: '螺蛳粉' },{ id: 6, name: '鱼香肉丝'},]}})
</script>

来吧展示：

使用过滤器之后：

使用双括号的方式去添加过滤器

 <tr v-for="item in list" :key="item.id"><td>{{ item.id }}</td><td>{{ item.name | filterData }}</td></tr>

Vue.filter('filterData',function () {console.log('过滤器被调用了。。。')return '螺蛳粉  my love~~'})//在vm实例对象之前去定义过滤器
var vm = new Vue({.........
})

来吧展示：

注意：过滤器的处理函数中的第一个参数已经规定死了，就是管道符前面的数，这里也就是item.name

如下：

Vue.filter('filterData',function (data) {console.log('过滤器被调用了。。。')return  data+ '~~~~~'})

三、给过滤器传递参数

 <td>{{ item.name | filterData('xxxxxxx')}}</td>

  Vue.filter('filterData',function (data,str) {return  data + str})

来吧展示：

四、使用多个过滤器

<td>{{ item.name | filterData | addstr}}</td>

 Vue.filter('filterData',function (data) {return  data+ '~~~~~'})
Vue.filter('addstr',function (data) {return  data + '哈哈哈哈哈'})

来吧展示：

五、全局过滤器的栗子

<div id="app"><p>{{msg}}</p>
</div>

var vm = new Vue({el: '#app',data: {msg: '鸭血粉丝里面放有:鸭血,鸭肠,鸭肝'},methods: {}});

使用全局过滤器，将"鸭"改成"猪"
方式一：

 <p>{{msg | filtermsg}}</p>

 Vue.filter('filtermsg',function (data) {// return data.replace('a','x')// replace只能替换掉第一项// 第一个参数传入正则,可以全局匹配return data.replace(/鸭/g,'猪')
})

2. 方式二：
在过滤器中传递参数

 <p>{{msg | filtermsg('猪')}}</p>

Vue.filter('filtermsg',function (data,str) {return data.replace(/鸭/g,str)
})

方式三：
直接在参数后面传入数据

<p>{{msg | filtermsg}}</p>

Vue.filter('filtermsg',function (data,str='猪') {return data.replace(/鸭/g,str)
})

如果定义了另外一个vm2实例
那么也可以使用全局过滤器

<body><div id="app"><p>{{msg | filtermsg}}</p>
</div>
<hr><div id="app2"><p>{{msg | filtermsg }}</p>
</div><script>Vue.filter('filtermsg',function (data,str='猪') {return data.replace(/鸭/g,str)})var vm = new Vue({el: '#app',data: {msg: '鸭血粉丝里面放有:鸭血,鸭肠,鸭肝'},methods: {}});var vm2 = new Vue({el:'#app2',data: {msg: '哇哦~是鸭血粉丝'},methods: {}});
</script>
</body>

六、私有过滤器

<div id="app2"><p>{{msg | filtermsg | addStr}}</p>
</div>

var vm2 = new Vue({el:'#app2',data: {msg: '哇哦~是鸭血粉丝'},methods: {},filters:{// addStr:function (data) {addStr(data){return data + '~~~~~~wao好好恰'}}});

注意：
私有过滤器只能vm2实例的容器才可以使用，vm实例的区域不能使用

如果全局过滤器与私有过滤器重名的话，会以就近原则，执行私有的过滤器

<div id="app2"><p>{{msg | filtermsg | addStr}}</p>
</div>

Vue.filter('filtermsg',function (data,str='猪') {return data.replace(/鸭/g,str)
})
var vm2 = new Vue({el:'#app2',data: {msg: '哇哦~是鸭血粉丝'},methods: {},filters:{// addStr:function (data) {addStr(data){return data + '~~~~~~wao好好恰'},filtermsg:function (data) {// return data.replace(/鸭/g,str)return data + '111111'}}
});

vue学习笔记（一） ---- vue指令（过滤器）相关推荐

Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
阿瑶的vue学习笔记(1)Vue核心
1. Vue核心 1.1. Vue简介 1.1.1. 官网英文官网中文官网 1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者:尤雨溪 1.1.3. Vue的特点遵 ...
Vue学习笔记(九) Vue CLI
1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,它包括三个独立的部分: CLI:一个全局安装的 npm 包,提供在终端里使用的命令 CLI 服务:一个局部安装在使用了 @v ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
少侠请重新来过 - Vue学习笔记(二) - Vue生命周期
Vue 生命周期和钩子每一个vue实例创建时,会经历一段初始化的过程,同时会调用其生命周期钩子,实例的钩子this指向它的Vue实例,不需要在钩子用箭头函数. <template>< ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...

vue学习笔记（一） ---- vue指令（过滤器）

一、什么是过滤器

二、过滤器的使用

三、给过滤器传递参数

四、使用多个过滤器

五、全局过滤器的栗子

六、私有过滤器

vue学习笔记（一） ---- vue指令（过滤器）相关推荐

最新文章

热门文章