watch实现数据监视

最新推荐文章于 2024-07-11 18:00:32 发布

七号程序

最新推荐文章于 2024-07-11 18:00:32 发布

阅读量95

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_67318246/article/details/130667510

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../../../js/vue.js"></script>
    <title>姓名案例_计算属性实现</title>
</head>
<body>
    <div id="root">
      姓:<input type="text" v-model="firstName"> 
      <br>
      名:<input type="text" v-model="lastName">
      <br>
      全名:<span>{{fullName}}</span><br>
      全名:<span>{{fullName}}</span><br>
      全名:<span>{{fullName}}</span><br>
      全名:<span>{{fullName}}</span>
    </div>
</body>
<script>
const vm=  new Vue({
    el:'#root',
    data:{
     firstName:'张',
     lastName:'三',
     fullName:'张-三'
    },
   watch:{
    firstName(val){
      this.fullName = val+'-'+this.lastName
    },
    lastName(val){
      this.fullName = this.firstName+'-'+val
    },
   }
   })
</script>
<!-- 
 计算属性： 用已经写好的属性去加工或者计算生成全新属性的过程
 computed和watch之间的区别：
 1.computed能完成的功能，watch都可以完成
 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
 两个重要的小原则：
 1.所被Vue管理的函数，最好写成普通函数，这样的this指向才是vm或者组件实例对象。
 2.所有不被Vue所管理的函数(定时器的回调函数，ajax的回调函数等)，最好写出箭头函数，这样this的指向才是vm或组件实例对象。
 -->
</html>