master

分支 (1)

管理

管理

master

learn-vue
/
demo_033.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>

</head>
<body>
    <div id="app">
        firstname: <input type="text" v-model="firstname">
        lastname: <input type="text" v-model="lastname" >
        fullname: <input type="text" v-model="fullname">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                firstname: null,
                lastname: null,
            },
            // computed 是为Vue实例定义属性的另一种方式！
            // computed定义的属性，称之为“计算属性”，计算属性的特点是：
            // 只要组成“计算属性”中的任何一个属性发生了变化，就会引起“计算属性”的重新计算。
            // 如下，fullname就是一个“计算属性”，只要this.firstname或者this.lastname变化了，
            // fullname这个“计算属性”，就会重新计算值。
            computed: {
                fullname() {
                    return this.firstname + " " + this.lastname;
                }
            }
        });
    </script>
</body>
</html>