master

分支 (1)

管理

管理

master

vue210127
/
15-计算属性的setter和getter.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{fullName}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'simplelu',
            firstName: '恺',
            lastName: '臻'
        },
        computed: {

            // 1.计算属性简写的样子
            // fullName: function () {
            //     return this.firstName + ' ' + this.lastName
            // }

            // 2.计算属性原来的样子，属性!!!
            // 计算属性一般是没有set方法（可忽略），只读属性
            fullName: {
                // set: function (newValue) {
                // dosomething
                // },
                get: function () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        }
    })
</script>
</body>
</html>