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

news/2024/7/10 2:46:58 标签: vue

                             计算属性与侦听器

计算属性: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>

 


http://www.niftyadmin.cn/n/1155373.html

相关文章

[转]RosBridge小结

1.rosbridge介绍 rosbridge(rosbridge_suite)是ros官方为开发者提供的一个用于非ros系统和ros系统进行交互通信的功能包。rosbridge主要包含两个部分&#xff0c;Rosbridge Protocol和Rosbridge Implementation。其中Protocol部分提供了非ros系统和ros系统通信的具体格式&…

vue 条件渲染、列表渲染、Class与Style绑定

条件渲染、列表渲染、Class与Style绑定 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>Vue</title> <script src"https://unpkg.com/vue/dist/vue.js"></script> </head> <body&…

iOS限制输入表情(emoji),出现九宫格不能输入的解决方法

在提交数据发送网络请求&#xff0c;由于用户输入了emoji表情&#xff0c;服务端返回系统异常&#xff0c;体验感很差。为了解决服务器不能验证emoji编码的问题&#xff0c;需要在本地进行emoji的输入控制&#xff08;一般情况应该由服务器在数据库中添加emoji对应的转码表以支…

图文详解--亲测有效---Vue-cli3 更新 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.

Vue-cli3 更新 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. 2.9.6 初始化项目是用 vue init webpack my-project 3.0以上 初始化项目是用 vue create my-project这是因为你安装的是2.9的版本用了3.0的命令 解决方法&#xff1a;1.用2.9的命令…

创建vue-cli 脚手架 项目

先安装好环境 安装 npm install -g vue-cli vue-cli cnpm install -g vue/cli -g全局安装 进入要创建的文件夹 2.9.6版本初始化项目 vue init webpack my-project 一路y 可以简单看看提示 第一个项目名称 项目描述 第三个作者 是否使用eslint语法检查工具…

CM记录-JVM调优

1.堆栈大小 2.JVM重用 3.GC 转载于:https://www.cnblogs.com/xinfang520/p/7684595.html

正在读王小波的《沉默的大多数》感觉不错的话就贴出来

人是一种会自己骗自己的动物。我们吃了很多无益的苦&#xff0c;虚掷了不少年华&#xff0c;所以有人就想说&#xff0c;这种经历是崇高的。 ---王小波《沉默的大多数》转载于:https://blog.51cto.com/seekerwolf/1075304

python之单例模式

说明&#xff1a;当一个类&#xff0c;__init__中或者其中写死一个变量&#xff0c;然后这个类创建多个对象的时候&#xff0c;会占用过多资源&#xff0c;我们希望只建立一个对象&#xff0c;我们可以通过单例模式&#xff0c;创建一个对象供其使用。如果当每个对象封装的值都…