本文实例讲述了Vue道具属性功能与用法。分享给大家供大家参考,具体如下:
HTML中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM中的模板时,camelCase(驼峰命名法)的道具名需要使用其等价的kebab-case(短横线分隔命名)命名:
html:
& lt; div id=坝τ贸绦?”比;
& lt; !——HTML中是kebab-case——比;
& lt;篇文章标题="你好!”祝辞& lt;/blog-post>
& lt;/div>
之前
js:
//道具的大小写(camelCase vs kebab-case)
Vue.component(“篇”,{//在js中是camelCase
道具:[' postTitle '),
模板:“& lt; h4> {{postTitle}} & lt;/h4>”
}）;
新Vue ({
埃尔:“应用程序1号”
}）
之前
重申一次,如果你使用字符串模板,那么这个限制就不存在的了。
到这里,我们只看到了以字符串数组形式列出的道具:
道具:[“标题”,“喜欢”,“发表”,“commentid”,“作者”)
之前
但是,通常你希望每个道具都有指定的值类型。这时,你可以以对象形式列出道具,这些属性的名称和值分别是支撑各自的名称和类型:
道具:{
标题:字符串,
喜欢:数量,
发表:布尔,
commentid:数组,
作者:对象
}
之前
这不仅为你的组件提供了文档,还会在它们遇到错误的类型时从浏览器的JavaScript控制台提示用户。你会在这个页面接下来的部分看到类型检查和其它支持验证。
像这样,你已经知道了可以像这样给道具传入一个静态的值:
& lt;篇title=翱ɡ病弊４? lt;/blog-post>
之前
你也知道道具可以通过v-bind动态赋值,例如:
& lt; !——动态赋予一个变量的值——比;
& lt;篇v-bind: title=皃ost.title祝辞& lt;/blog-post>
& lt; !——动态赋予一个复杂表达式的值——比;
& lt;篇v-bind:标题="。标题+ " " + post.author.name“祝辞& lt;/blog-post>
之前
在上述两个示例中,我们传入的值都是字符串类型的,但实际上任何类型的值都可以传给一个道具。
<强> 3.1传入一个数字
& lt; !——静态——比;
& lt; !——这里的40实际是JS表达式——比;
& lt;篇v-bind:喜欢=?0”祝辞& lt;/blog-post>
& lt; !——动态——比;
& lt;篇v-bind:喜欢=" post.likes "祝辞& lt;/blog-post>
之前
<强> 3.2传入一个布尔值
& lt; !——传入布尔值——比;
& lt; !——如果道具没有该值,则表示真实——比;
& lt;篇is-published> & lt;/blog-post>
& lt; !——静态——比;
& lt; !——这里的假实际是JS表达式——比;
& lt;篇v-bind:发表=" false "祝辞& lt;/blog-post>
& lt; !——动态——比;
& lt;篇v-bind:发表=" post.isPublished "祝辞& lt;/blog-post>
之前
<强> 3.3传入一个数组
& lt; !——静态——比;
& lt;篇v-bind: comment-ids="[1, 2, 3]“祝辞& lt;/blog-post>
& lt; !——动态——比;
& lt;篇v-bind: comment-ids=" post.commentIds "祝辞& lt;/blog-post>
之前
<强> 3.4传入一个对象
& lt; !——静态——比;
& lt;篇v-bind:作者="{名称:“德尼罗”,公司:“梦工厂”}“祝辞& lt;/blog-post>
& lt; !——动态——比;
& lt;篇v-bind:作者=" post.author "祝辞& lt;/blog-post>
之前
<强> 3.5传入一个对象的所有属性
如果你想要将一个对象的所有属性都作为道具传入,你可以使用不带参数的<代码> v-bind> v-bind: prop-name>
职位:{
id: 1、
标题:“xx新闻”
}
之前
下面的模板:
& lt;篇v-bind=昂蟆弊４? lt;/blog-post>
