vue.js自学(D5)

最新推荐文章于 2024-04-22 15:55:20 发布

放屁鮰鱼

最新推荐文章于 2024-04-22 15:55:20 发布

阅读量223

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue.js 笔记

本文链接：https://blog.csdn.net/fangpihuiyu/article/details/104390565

笔记同时被 2 个专栏收录

36 篇文章

订阅专栏

Vue.js

13 篇文章

订阅专栏

vue.js自学(D5)

04-计算属性

02计算属性的复杂操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>总价格：{{totalPrice}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好啊',
                books:[
                    {id:110, name: 'Unix编程艺术', price: 119},
                    {id:111, name: '代码大全', price: 105},
                    {id:112, name: '深入理解计算机原理', price: 98},
                    {id:113, name: '现代操作系统', price: 87},
                ]
            },
            computed:{
                totalPrice(){
                    let result = 0;
                    for(let i = 0; i < this.books.length; i++){
                        result += this.books[i].price;
                    }
                    return result
                }
            }
        })
    </script>
</body>
</html>

03- 计算属性setter和getter（p23）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{fullName}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                message:'你好啊',
                firstName: 'Kobe',
                lastName: 'Bryant'
            },
            computed:{
                // fullName:function(){
                //     return this.firstName + ' ' + this.lastName
                // }
                //计算属性一般是没有set方法，只读属性。
                fullName: {
                    set: function(newValue){
                        console.log('---',newValue);
                        const names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[1];
                    },
                    get: function(){
                        return this.firstName + ' ' + this.lastName
                    }
                }
            }
        })
    </script>
</body>
</html>