[Vue][:class]Vue动态绑定class错误分析

问题

我使用 :class 动态绑定样式表，出现以上问题
看代码

它的父级我在 Vue 应用里已经绑定了
并且 data 中包含 activeWho 属性
但是它依然报错，说是这个属性没有定义
但是代码能正常工作
可是强迫症看着难受

思考

经过试验以及思考
我终于明白是什么问题了

我们在body后边引用vue写好的js代码，它才会工作
并且在代码里边没有直接操作document的地方
而是使用 new 关键字创建对象
所以一切的document操作在创建vue时进行
此时vue进行分析dom节点
当它分析到 barCurrent: barInfo.activeWho 时
由于创建对象还未完成，自然无法访问这个应用变量
当我删掉 barInfo. 时，代码能正常工作，且不报错
此时解析直接到创建过程中寻找activeWho属性
自然能找到
而不能加对象名，是因为创建时对象并未完全创建，无法访问对象
所以会报错说找不到这个属性的定义
能正常工作是因为当脚本运行完毕后，对象已创建
所以能访问到属性

结论

所以在vue应用绑定的dom里
不要直接使用创建的应用名
但是在下一个应用中，则能使用应用名访问data属性

其实这个原理和js的基础语法息息相关
就像积木一样
单个积木虽然形状简单
但是有不同形状的积木却能创造无限形状

[Vue][:class]Vue动态绑定class错误分析相关推荐

vue给标签动态绑定title
vue给标签动态绑定title 在利用vue开发时,如果标签宽度比较小,我们需要利用 overflow:hidden;text-overflow:ellipsis;white-space: nowra ...
vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...
Vue——邂逅Vue
Vue--邂逅Vue Vue--Vue的基础语法 Vue--Vue的组件化 Vue--slot_插槽的基本使用文章目录 1:为什么学习Vue 2:Vue介绍 3:Vue初体验 4:Vue的实例 4. ...
vue——初学Vue
vue--初学Vue 1.事件处理 1.1事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:只有event.ta ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
【Vue】Vue的简介和特性
一.Vue简介 Vue.js可以说是MVVM架构的最佳实践,是一个JavaScript MVVM库,是一套构建用户界面的渐进式前端框架.专注于MVVM中的ViewModel,不仅做到了数据双向绑定,而 ...
VUE｜VUE前端开发--基本语法
VUE|基本语法一.声明式渲染 ◼ hellovue1.html <html> <head><title>HelloWorld!</title>< ...
简单介绍Vue之vue.$set()方法源码案例
这篇文章主要介绍了Vue之vue.$set()方法源码案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下在使用vue开发项目的过程中,经常会遇到这样 ...
vuejs和html语言一样么,vue和vue.js有区别吗？
vue和vue.js没有区别,vue就是vue.js的简称.vue是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue (读音 /vjuː/,类似于 ...
Vue：Vue的＜ span ＞文字怎么加粗？
Vue:Vue的< span >文字怎么加粗? 资源 span文字加粗_span盒子对象内字体加粗

[Vue][:class]Vue动态绑定class错误分析

问题

思考

结论

[Vue][:class]Vue动态绑定class错误分析相关推荐

最新文章

热门文章