vue2中过滤器属性

最新推荐文章于 2023-07-04 07:30:34 发布

Lofty_ambition

最新推荐文章于 2023-07-04 07:30:34 发布

阅读量521

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qinchaidaren/article/details/74940752

版权

vue.js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

vue2.x中的过滤器，不同于vue1.X,在vue2.X中的过滤器，要在js中设置，如果是复杂的格式的装换，可以使用计算属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    {{message | capitalize }}
</div>
<script>
//vue中的过滤器，就是用来处理文本转换的，如果使用更复杂的数据转换，使用计算属性   vue2.0中过滤器只能使用v-bind
//vue2中的过滤器  用在filter中定义
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello"
        },
        filters:{
            capitalize: function (value) {
                value = value.toString();//toString() 方法可把一个逻辑值转换为字符串，并返回结果。   toString  将逻辑值转化成一个字符串的形式  charAt()找到字符串中某个位置的字符
                return value.charAt(0).toLocaleUpperCase() + value.slice(1)
            }
        },//对象用来绑定多个方法
    })
</script>
</body>
</html>

以上代码的输出结果是 Hello;;;;

Lofty_ambition

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2中过滤器属性

vue2.x中的过滤器，不同于vue1.X,在vue2.X中的过滤器，要在js中设置，如果是复杂的格式的装换，可以使用计算属性：html>html lang="en">head> meta charset="UTF-8"> title>过滤器title> script src="https://unpkg.com/vue">script>head>body>
复制链接

扫一扫