vue3:过滤器
过滤器分为全局过滤器和局部过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{count|change('--百分比')}}</div>
<div>全局过滤器{{count|allNumber}}</div>
<!--change函数接收的官道符左侧的参数-->
<!--allNumber接收的官道符左侧的参数-->
</div>
<script src="js/vue.js"></script>
<script>
<!-- 全局过滤器是filter,局部过滤器是filters-->
Vue.filter('allNumber',function (value) {
return value+'%'
})
new Vue({
el:'#app',
data:{
msg:'test',
count:19
},
methods:{
},
filters:{
change:function (value,flag) {
console.log('value-->'+value)
console.log('flag-->'+flag)
return value+'%'+flag
}
}
})
</script>
</body>
</html>
<!--过滤器主要实现：例如:过滤后端返回的数据-->
应用实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{status|change}}
<!--change接收的官道符左侧的参数-->
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
count:19,
status:2
},
methods:{
},
filters:{
change:function (status) {
// 1.代表成功
// 2.代表失败
if(status==1){
return '成功'
}else if(status==2){
return '失败'
}
}
}
})
</script>
</body>
</html>
<!--过滤器主要实现：例如:过滤后端返回的数据-->
生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
// 生命周期
//vue在实例化到页面经历了哪些步骤
//钩子函数，预留了几个特殊的方法
new Vue({
el:'#app',
data:{
msg:''
},
//实例化后，数据还没初始化
beforeCreate:function () {},
// 数据初始化之后
created:function(){},
// 未和标签进行关联之前
beforeMount:function(){},
// 实例和标签关联之后
mounted:function(){
this.msg='模拟获取到了后台的列表数据'
console.log('mounted')
},
// 数据更新前
beforeUpdate:function(){
console.log('beforeUpdate')
},
// 数据更新后
updated:function(){
console.log('updated')
}
})
</script>
</body>
</html>
