局部和全局过滤器练习
过滤器练习
对数据的操作
版本一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h1>{{msg.split('').reverse().join('')}}</h1>
</div>
</body>
<script>
let vm = new Vue({
el:"#app",
data(){
return{
msg:'hello',
price:200,
price2:200.1,
}
}
})
</script>
</html>
过滤器解决方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h1>{{msg.split('').reverse().join('')}}</h1> <h1>{{msg|str_reverse}}</h1> <hr> <h2>{{price|money_symbol}}</h2> <h2>{{price2.toFixed(2)}}</h2> <h2>{{price2|decimal_point(2)}}</h2>
</div>
</body>
<script>
let vm = new Vue({
el:"#app",
data(){
return{
msg:'hello',
price:200,
price2:200.1,
}
},
filters:{
str_reverse(val){
return val.split('').reverse().join('')
},
money_symbol(val){
return '￥' + val + '元'
},
decimal_point(val,num){
return val.toFixed(num)
}
}
})
</script>
</html>
导入过滤器的使用方式
<script src="js/filter.js"></script>
使用方式：
<h1>{{msg|str1_reverse}}</h1> 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/filter.js"></script> </head> <body> <div id="app"> <h1>{{msg.split('').reverse().join('')}}</h1> <h1>{{msg|str1_reverse}}</h1> <h1>{{msg|str_reverse}}</h1> <hr> <h2>{{price|money_symbol}}</h2> <h2>{{price2.toFixed(2)}}</h2> <h2>{{price2|decimal_point(2)}}</h2>
</div>
</body>
<script>
let vm = new Vue({
el:"#app",
data(){
return{
msg:'hello',
price:200,
price2:200.1,
}
},
filters:{
str_reverse(val){
return val.split('').reverse().join('')
},
money_symbol(val){
return '￥' + val + '元'
},
decimal_point(val,num){
return val.toFixed(num)
}
}
})
</script>
</html>
浙公网安备 33010602011771号