vue基础 · 过滤器（3）
过滤器：filter
- Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以使用在2个地方：{{ }} 插值 和 v-bind 表达式（后者从 2.1.0+ 开始支持）
- 过滤器分为：全局过滤器、局部过滤器 2种，一种是创建 Vue 实例之前全局定义过滤器，另一种是在vue对象中创建 filters属性
1、局部过滤器（filters）
<body>
<div id="app">
{{count | change('---百分比','【文件】')}}
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
count:19
},
methods:{
},
// 过滤器
filters:{
// value接收的是魔板语言中的count
change:function (value,flag,file) {
// flag接收：---百分比；file接收：【文件】
return value+"%"+flag+file
}
}
})
</script>
</body>
展示：
练习
- 模拟接口返回值，通过获取的status的值，进行判断：1表示成功，2表示失败，获取到后返回页面
<body> <div id="app">
<!-- 执行到这里时，会走filters中的方法，判断status的值，来给到change,最终返回结果是：成功 or 失败-->
{{status | change}} </div> <script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
count:19,
status:1,
},
methods:{
},
// 过滤器
filters:{
//
change:function (status) {
// status: 1、成功；2、失败
if (status==1){
return '成功'
}else if(status==2){
return '失败'
}
}
}
}) </script>
</body>
展示
filters可声明编写多个方法，每个方法都是一种过滤器
<script>
new Vue({
el: '#app',
data: {
msg: 'test',
count: 19,
status: 1,
},
methods: {},
// 过滤器
filters: {
change: function (status) {
// status: 1、成功；2、失败
if (status == 1) {
return '成功'
} else if (status == 2) {
return '失败'
}
},
number: function (value,flage){
return value + "%" + flage
},
}
}) </script>
2、全局过滤器（Vue.filter）
在初始化Vue的时候进行绑定（声明Vue实例之前）
Vue.fileter（‘allNumber’,function(){
}）
- allNumber：第一个参数是过滤器的名字
- function：匿名函数
与局部变量在使用是的区别是：局部过滤器只可以在Vue的实例中使用，而全局过滤器相当于是在所有的地方都可以使用；
fileter是没有s的
<div id="app">
//魔板语言count首先取到，在传给【全局过滤器】allNumber
全局过滤器:{{count | allNumber}} </div> <script src="../js/vue.js"></script>
<script>
// value会取到 魔板语言中 count的值
Vue.filter('allNumber',function (value) {
return value + "%"
}) new Vue({
el: '#app',
data: {
msg: 'test',
count: 19,
},
methods: {},
// 局部过滤器
filters: {
change: function (status) {
// status: 1、成功；2、失败
if (status == 1) {
return '成功'
} else if (status == 2) {
return '失败'
}
}, }
}) </script>
</body>
展示：
3、生命周期
整个Vue实例到页面，经历的哪些步骤，Vue给我们提供了几个钩子函数。
钩子函数：Vue在执行的过程中，有些地方了解到我们可能会对Ta自定义，预留了几个特殊的方法，这几个方法可以声明Ta，对Ta进行修改；当Vue在实例化时，如果没加特殊方法就正常执行，加了特殊的方法，就先把特殊的方法执行完，然后在渲染到页面【钩子函数都是针对实例化中Vue的属性，如：el、data、methods,通过属性的方式赋予钩子函数的能力】
为了方便在不同的节点对数据进行调整
- 平常使用的最多的是：mounted，这一个也就基本够用了
<body>
<div id="app">
{{msg}}
</div>
<script src="../js/vue.js"></script>
<!--vue的生命周期：是指vue实例化到页面经历了哪些步骤-->
<!--钩子函数：预留了几个特殊的方法-->
<script src="..js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: ''
},
// 刚实例化Vue,还没做任何操作
beforeCreate: function () {
//实例化后，数据还没有初始化
console.log('beforeCreate')
},
created: function () {
//数据初始化后，data的数据已经被初始化了
console.log('created')
},
beforeMount: function () {
//未和标签（<div id="app">）进行关联前
console.log('beforeMount')
},
mounted: function () {
//当前的Vue实例和标签进行关联后
//可以用来获取后台列表数据
this.msg = '获取后台列表数据'
console.log('mounted')
},
beforeUpdate: function () {
//数据更新前
console.log('beforeUpdate')
},
updated: function () {
//数据更新后
console.log('updated')
}
})
</script>
</body>
msg：初始时为空，当Vue与实例关联后，执行了钩子函数mouted方法，将msg修改为：‘获取后台列表数据’，最终把【获取后台列表数据】渲染到了页面
beforeUpdate、updated：一起用会有冲突， 别一起使用，更别在updata中改数据，改了后就是无限循环了
展示：
vue基础 · 过滤器（3）的更多相关文章
- 六、vue基础--过滤器定义
七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...
- vue基础----过滤器filter
1.用的场景:一个功能在每个组件都能用,而computed虽然有缓存,但不能用在每一个组件,需要的话的每一个都需要写. 2.特点:改变数据的展示形式,不改变原有的形式 分为全局与局部的 <di ...
- vue基础学习（二）
02-01 vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue基础汇总实践
1)双向绑定: <div id="app"> <p>{{message}}</p> <input v-model=" ...
- Vue.js -- 过滤器
VueJs中的过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/ ...
- Vue基础以及指令, Vue组件
Vue基础篇一 Vue指令 Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上. <div ...
随机推荐
- thymeleaf checkbox的回显
最近用到了一些thymeleaf 的界面,有写问题一并写出来,如果这篇文章能给你带来帮助不胜荣幸,如果有问题,也请予以批评和改正 第一就是涉及到复选框的一个回显:例如我是单个复选框的是否选中 在< ...
- 蓝牙mesh消息包与以太网帧的分层构成
目录 笔者在接触以太网之前,先了解的是蓝牙mesh的各类信息.现翻看一本介绍TCP/IP协议的资料,发现应用层数据在以太网协议栈内的封装过程与蓝牙mesh协议栈内的封装过程异曲同工.下图左侧是手头这本 ...
- Linux系统实时监控
命令 top Top命令用于实时显示process的动态.参数如下: d:设置显示的更新速度 q:无延迟的显示速度 c:切换显示模式,一共有两种显示模式,一是只显示执行档,另一种是显示 ...
- uni消息推送
//APP.vuegetUser(){//获取客户端标识 消息推送 // #ifdef APP-PLUS var pinf = plus.push.getClientInfo(); var cid = ...
- Python基础前言
计算机内部存储数据的原理 """计算机内部只认识01二进制"""是因为计算机是基于电工作的,而电是有高低电频之分00000001 000 ...
- Servlet中使用request转发页面引发的500空指针异常
多余的不说如果你出现了我下面这张图的异常错误,可以继续看下去: 上面的错误是因为我们使用的转发地址错误引起的,这样他转发的地址不存在,则会出现空指针异常. register.jsp在我的Tomcat的 ...
- 至少有K个重复字符的最长子串
传送门 /** * 分治 */ class Solution { // dp[i]:表示以i为结尾满足条件的子串的长度 public int longestSubstring(String s, in ...
- Java基础-注释、标识符和关键字、数据类型及拓展
注释 单行注释// 多行注释/* */ 文档注释/** */ 标识符 Java所有的组成部分都需要名字.类名.变量名及方法名都被成为标识符 关键字 数据类型 强类型语言(安全性高,java) 要求变量 ...
- java-javaSE-集合类
集合类结构 集合类的基本接口是 Collection 和 Map Collection 向下派生出 Set List Queue 等接口 Map 向下派生出 HashMap LinkedHashMap ...
- docker学习（dockerfile打jar包为镜像）
docker打包jar为docker镜像 1.使用Dockerfile打镜像 将spring boot应用打包成jar包放置在/app/applcation路径中 编写dockerfile文件,内容参 ...