vue1.0中computed计算属性的简单用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed计算属性的用法</title>
    <script src="vue1.0.11.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    {{fullName}}
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            firstName:'heima',
            lastName:'itcast'
        },
        computed:{//在实际的应用中要尽可能的使用computed计算属性少用watch属性,因为计算属性是基于data中的值,data中的值一改变,那么这个计算属性也就跟着改变,用来实时的监控
            fullName:function () {
                return this.firstName+this.lastName;
            }
        }
    });
</script>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_40593587/article/details/79311636