Vue学习（四）——计算属性和侦听器

最新推荐文章于 2023-12-22 21:09:56 发布

Bambi12

最新推荐文章于 2023-12-22 21:09:56 发布

阅读量178

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Bambi12/article/details/83897587

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
   <title>计算属性和侦听器</title>
   <script src="./vue.js"></script>
</head>
<body>
   <div id="root">
      姓:<input v-model="firstName"/>
      名:<input v-model="lastName"/>
      <div>{{fullName}}</div>
      <div>{{count}}</div>
   </div>

   <script>
  new Vue({
       el:"#root", 
       data:{
          firstName:'',
          lastName:'',
          count:0
       },
       computed:{   //计算属性:根据其他属性计算出的结果
        fullName:function(){
          return this.firstName+this.lastName;
        }
       },
       watch:{   //监听某一个数据或者属性发生了变化
        fullName:function(){
          this.count++;
        }
       /* firstName:function(){
          this.count++;
        },
        lastName:function(){
          this.count++;
        }*/
       }
   	})
   </script>
</body>
</html>

注：学习笔记内容来自：https://www.imooc.com/learn/980
官网：cn.vuejs.org