-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path06-过滤器.html
66 lines (52 loc) · 1.04 KB
/
06-过滤器.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="../vue.min.js"></script>
<script type="text/javascript">
// 全局过滤器
Vue.filter('myReverse',function(value,arg1) {
return arg1+' '+ value.split('').reverse().join('');
});
// 过滤器的作用： 对你当前的数据添油加粗
/*在组件内部用 filters:{
过滤器的名字:function(value){
//内部一定要return
}
调用过滤器 ： 数据属性 | 过滤器的名字
}
*/
var App = {
data(){
return{
price: 0,
msg:'hello filter'
}
},
template:`
<div>
<input type="number" name = 'price' v-model = 'price'/>
<h3>{{price | myCurrentcy}}</h3>
<h4>{{ msg | myReverse('hehe')}}</h4>
</div>
`,
filters:{
myCurrentcy:function(value) {
return '¥' + value;
}
}
}
new Vue({
el:'#app',
components:{
App
},
template:'<App />'
});
</script>
</body>
</html>