今天在學習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>
圖示
顯示效果如下
報了兩個錯誤,沒有找到user 和 name 這個之前用來拋磚引玉的例子是一致的,程序把英文連接符當成減號了,我們把最后一個連接線的寫法去掉
刪除部分代碼后,變成現在的樣子
顯示結果如下
我們會發現,駝峰用戶名顯示為空置,想了想html里面是不支持大小寫的,於是但是我們又用了駝峰命名,那么我就把駝峰改成了連接線的方式進行賦值,
運行效果
完美展示出來了!!!!!!!!!!!!!!!
總結如下:vue的組件的props屬性支持駝峰命名,不支持連接線命名,使用是用連接線進行賦值或者數據綁定!
正確的用法如下圖↓↓
