首页 > 代码库 > vue 组件属性props,特性驼峰命名,连接线使用

vue 组件属性props,特性驼峰命名,连接线使用

2024-09-02 22:05:39   215人阅读

今天在学习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="http://www.mamicode.com/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属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定!

正确的用法如下图↓↓

 技术分享

 

vue 组件属性props,特性驼峰命名,连接线使用


联系
我们