今天在学习vue的时候碰到了一个有趣的问题
是这样的,先来个话题引入,后面会用到
var myname={ 'first-name':'9', 'last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']);打印出来是 NaN 9
解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,name也不知道是什么,所以会 undefined-undefined=NaN
++++++++++++++++++++++++++++++++++++++++++++++++++++华丽的分割线+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
下面是vue组件属性的例子,直接看图,这个组件有三个属性 username userName user-name 然后再页面中使用这个组件,展示页面.
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <my-component username="username" userName="userName" user-name="user-name"></my-component> </div> <script> Vue.component('my-component',{ template:'<p class="baz boo">用户名是:{{username}},驼峰用户名是:{{userName}},连接线用户名是:{{user-name}}</p>', props:['username','userName','user-name'] }); var vm=new Vue({ el:'#app' }); </script> </body> </html> View Code图示
显示效果如下
报了两个错误,没有找到user 和 name 这个之前用来抛砖引玉的例子是一致的,程序把英文连接符当成减号了,我们把最后一个连接线的写法去掉
删除部分代码后,变成现在的样子
显示结果如下
我们会发现,驼峰用户名显示为空置,想了想html里面是不支持大小写的,于是但是我们又用了驼峰命名,那么我就把驼峰改成了连接线的方式进行赋值,
运行效果
完美展示出来了!!!!!!!!!!!!!!!
总结如下:vue的组件的props属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定!
正确的用法如下图↓↓
转载于:https://www.cnblogs.com/alasq/p/6363160.html
