vue中计算属性、过滤器、高阶函数的使用

最新推荐文章于 2024-01-11 14:31:05 发布

LJ君

最新推荐文章于 2024-01-11 14:31:05 发布

阅读量375

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_45068048/article/details/113730050

版权

本文通过示例详细介绍了Vue.js中的计算属性用于动态计算书籍总价，过滤器用于格式化价格显示，以及如何使用高阶函数如reduce、filter和map进行数据处理。计算属性在数据变化时自动更新，过滤器可以方便地格式化输出，而高阶函数则展示了对数组数据的高效操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.计算属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>书籍的总价格是：{{fullPrice}}</h1>
</div>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data:{
            books:[
                {id: '001', name: '编程语言',price:78},
                {id: '002', name: '编程魅力',price:45},
                {id: '003', name: '编程爱你进',price:45},
                {id: '004', name: 'java语言规范',price:45},
            ]
        },
        // 计算属性 多次调用时 不会重复执行 当数据发生变化时才会重新调用计算属性函数
       computed:{
            fullPrice:function () {
                let result=0;
             for(let i=0 ; i<this.books.length;i++){
                 result+=this.books[i].price;
             }
             // for(book in this.books)
             // {}
             // 方法必须有返回值
             return result;
            }
        },
    })
</script>
</body>
</html>

总结：
在vue实例对象中添加computed ,编写方法，必须有返回值
调用时{{方法名}}就可以了
2.过滤器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    过滤器的应用-->
    {{price|changprice}}
</div>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data:{
            price:200,
        },
        methods:({

        }),
        //定义过滤器
        filters:{
            changprice(price)
            {
               return "￥"+price.toFixed(2);
            }
        }
    })
</script>
</body>
</html>

总结：在vue实例中添加filters 属性
filters:{
changprice(price)
{
return “￥”+price.toFixed(2);
}
}
调用只需在 {{price|changprice}}
3.高阶函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="jisuan">reduce</button>
    <button @click="filter1">filter</button>
    <button @click="all">综合应用</button>

</div>
<script src="../../lib/vue-2.4.0.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data:{
            books:[
                {name:'java',price:22},
                {name:'php',price:22},
                {name:'php',price:98},
                {name:'android',price:56},
            ]
        },
        methods:({
            //使用reduce方法进行数据汇总
            // 第一个参数是函数   第二个参数是累计的初始值  返回值是数字
           jisuan(){
               let allprice=this.books.reduce(function (previous,book) {
                  return previous+book.price;
               },0)
               console.log(allprice);
           },
            // 返回值是数组 filter 主要是为了对数组数据进行过滤
           filter1(){
               let newbooks=this.books.filter(function (book) {
                return  book.price>50;//为true时才会返回，false是不会返回
               })
               console.log(newbooks);
               //map的作用是对数组中的数据进行操作
               let newbooks2=newbooks.map(function (books) {
                   return books.price*2;
               })
               console.log(newbooks2);
           },
            all1()
            {
                //比较复杂的方式
                let totalprice=this.books.filter(function (book) {
                 return book.price>50
                }).map(function (book) {
                 return book.price*2;
                }).reduce(function (previus,n) {
                  return previus+n;
                },0)
                console.log(totalprice)
            },
            all()
            {
                //简写方式进行   箭头函数的使用
                let totalprice=this.books.filter(book=> book.price>50
                ).map(book=> book.price*2).reduce((previus,n)=> previus+n,0);
                console.log(totalprice)
            }

        }),
    })
</script>
</body>
</html>