vue 调试和计算属性与侦听器

最新推荐文章于 2024-05-30 16:11:37 发布

vue学习

最新推荐文章于 2024-05-30 16:11:37 发布

阅读量134

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44180173/article/details/104079883

版权

vue 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

计算属性与侦听器

计算属性：computed 监听的是本实例中的值使用场景;数据联动

侦听器：watch 使用场景; 异步场景

调试 var app = new Vue({}) 然后就可以用 app. 查看值进行调试

改变实例之外的值

但是如果在改变msg 的值msg1就会改变了


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo1</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ msg }}</p>
  <div>{{another}}</div>
  <div>{{msg1}}</div>
</div>

<script>
  var warp ="warp"
var  app = new Vue({
  el: '#app',
  data: {
    msg : 'Hello Vue.js!',
    another:'this is  another'
  },
  watch:{
    msg:function(newval,oldval){
      console.log('new is :'+newval)
      console.log("old is"+oldval)
    }
  },
  computed:{
    msg1:function(){
      return 'computed:'+ this.msg+',--'+ this.another + warp
    }
  }
})

</script>
</body>
</html>