admin管理员组

文章数量:1794759

计算属性的基本操作和复杂操作

计算属性的setter和getter操作

代码语言：javascript代码运行次数：0运行复制
<!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">{{fullname}}</div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                lastname: "SF",
                firstname: "L"
            },
            computed: {
                fullname: {
                    // 计算属性一般只有get属性只读属性
                    set: function(newvalue){
                        const name = newvalue.split(" ")
                        this.firstname = name[0]
                        this.lastname = name[1]
                    },
                    get: function(){
                        return this.firstname + " " + this.lastname
                    }
                }
            }
        })
    </script>
</body>
</html>

计算属性的基本操作：

代码语言：javascript代码运行次数：0运行复制
<!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">
        <h1>{{getfullName1()}}</h1>
        <h1>{{getfullName2()}}</h1>
        <h1>{{fullName}}</h1>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                lastname: "SF",
                firstname: "L"
            },
            computed: {
                fullName: function(){
                    return this.firstname + " " + this.lastname
                }
            },
            methods: {
                getfullName1: function(){
                    return this.firstname + " " + this.lastname
                },
                getfullName2(){
                    return this.firstname + " " + this.lastname
                }
            },
        })
    </script>
</body>
</html>

计算属性的复杂操作：

代码语言：javascript代码运行次数：0运行复制
<!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">总价格：{{totalPrice}}</div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [
                    {id: 1, name: "Unix编译艺术", price: 110},
                    {id: 2, name: "代码大全", price: 105},
                    {id: 3, name: "深入理解计算机原理", price: 85},
                    {id: 4, name: "现代操作系统", price: 90}
                ]
            },
            computed: {
                totalPrice: function(){
                    let res = 0
                    for(let i = 0; i < this.books.length; i++){
                        res += this.books[i].price
                    }
                    return res
                }
            }

        })
    </script>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2023-01-09，如有侵权请联系 cloudcommunity@tencent 删除htmlappscript编译原理

本文标签： 计算属性的基本操作和复杂操作

版权声明：本文标题：计算属性的基本操作和复杂操作 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1754836763a1707115.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。