vue的data数据用的是全局变量,变量是普通数据类型,变量改变,data未改变

如果vue的data数据用的是全局变量,变量是普通数据类型,那么当全局变量的值发生改变的的时候,那么data中用的这个值是不会发生改变的,也无法触发视图更新 ,因为是普通数据类型

解决:
全局的普通数据类型改为引用数据类型

Vue({
  data:{
    tabMouth: tabMouth,
    tabDay:tabDay,
  }
})

var tabMouth = {value: false};
var tabDay = {value: false};
var tabEventCall = function (event) {
  if(event.id==0) {
    console.log(event.id)
    tabMouth.value = true
    tabDay.value = false
  } else if(event.id!=0){
    console.log(event.id)
    tabDay.value = true
    tabMouth.value = false
  }
}

原文地址:https://www.cnblogs.com/lifan-play-up/p/10848585.html

时间: 2024-08-02 16:07:45

vue的data数据用的是全局变量,变量是普通数据类型,变量改变,data未改变的相关文章

深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据. <template id="MyCpn"> <div> <h2>组件数据的存放 </h2> <p>{{title}}</p> </div> </template> <script>

Vue之九数据劫持实现MVVM的数据双向绑定

vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛戳这里 整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:1.实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2.实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数3.实现

手写vue双向绑定数据

来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定watcher (3)  实现DOM事件改变之后, 响应data数据,实现视图更新 <!DocType> <html> <title>vue 的双向绑定事件</title> <body id="app"> <input ty

vue双向绑定(数据劫持+发布者-订阅者模式)

参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新view,因为view更新data其实可以通过事件监听即可.我们着重来分析,当数据改变,如何更新视图的. 如何知道数据变了,就是通过Object.defineProperty( )对属性设置一个set函数,当数据改变了就会来触发这个函数,所以我们只要将一些需要更新的方法放在这里面,就可以实现data更

VUE - 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property &#39;xxxx&#39; of undefined 的解决办法

created() { var that=this axios.get('http://jsonplaceholder.typicode.com/todos') .then(function (res) { // handle success // console.log(res); that.todos = res.data }) .catch(function (error) { // handle error console.log(error); }) .finally(function

vue 组建实现数据的双向绑定

<!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Arial, sans-serif;  font-size: 14px;  color: #444;} table {  border: 2px solid #42b983;  border-radius: 3px;  background-color: #fff;} th {  background-color:

ajax请求获取的数据无法赋值给全局变量问题总结

一.总结: 1.问题描述: 今天做项目遇到在用表单显示详细信息的过程中ajax请求获取的数据无法赋值给全局变量的情况,从列表页面进入详情页,在详情页面被渲染了之后就会调用js文件里的接口向服务器请求数据,除了详情页面被加载之后需要向服务器发送ajax请求,在详情页面还有几个表单控件的属性需要去请求服务器获取实际项目中要求要显示的数据. 如下代码,直接在ajax请求中改变表单控件的值,避开了给全局变量赋值. 给全局变量赋值的解决办法,给ajax请求设置async为false,表示请求为同步请求:

iOS Core Data 数据迁移 指南

前言 Core Data是iOS上一个效率比较高的数据库框架,(但是Core Data并不是一种数据库,它底层还是利用Sqlite3来存储数据的),它可以把数据当成对象来操作,而且开发者并不需要在乎数据在磁盘上面的存储方式.它会把位于NSManagedObject Context里面的托管对象NSManagedObject类的实例或者某个NSManagedObject子类的实例,通过NSManagedObjectModel托管对象模型,把托管对象保存到持久化存储协调器NSPersistentSt

iOS教程:Core Data数据持久性存储基础教程

其实最近更多的是在写这篇文章<iOS教程:使用持久性数据Core Data>,这篇是<iOS开发教程:Storyboard全解析-第一部分>这篇的后续,但是目前还没有完成,先放出一个持久性数据存储的教程以供参考.这其实是一篇翻译文章,英文的原文见这里.我翻译的过程中改变了一些内容以便适应我们中国人的口味,下面请看教程: 就像我一直说的,Core Data是iOS编程,乃至Mac编程中使用持久性数据存储的最佳方式,本质上来说,Core Data使用的就是SQLite,但是通过一系列特