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

最新推荐文章于 2022-04-20 21:49:45 发布

dengzong3162

最新推荐文章于 2022-04-20 21:49:45 发布

阅读量238

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/alasq/p/6363160.html

版权

今天在学习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

dengzong3162

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 组件属性props,特性驼峰命名,连接线使用

今天在学习vue的时候碰到了一个有趣的问题是这样的,先来个话题引入,后面会用到var myname={ 'first-name':'9', 'last-name':'l o n g'}console.log(myname.first-name);console.log(myname['first-name']);　　打印出来是 N...
复制链接

扫一扫