diff --git a/docs/markdown/en-US/quickstart.md b/docs/markdown/en-US/quickstart.md index 3027e4e2c..4bc267787 100644 --- a/docs/markdown/en-US/quickstart.md +++ b/docs/markdown/en-US/quickstart.md @@ -58,3 +58,15 @@ Vue.use(Vant); <!-- import script --> <script src="https://unpkg.com/vant/lib/vant.min.js"></script> ``` + +### Props Named Style +HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents. + +``` html +<!-- camelCase in JavaScript --> +<van-cell isLink /> + +<!-- kebab-case in HTML --> +<van-cell is-link /> +``` + diff --git a/docs/markdown/zh-CN/quickstart.md b/docs/markdown/zh-CN/quickstart.md index e68284bbb..6499f5fdb 100644 --- a/docs/markdown/zh-CN/quickstart.md +++ b/docs/markdown/zh-CN/quickstart.md @@ -65,3 +65,15 @@ Vue.use(Vant); ```shell vue init youzan/vue-cli-template-vant projectName ``` + +### Props 命名风格 +Vant 文档中的 props 默认采用驼峰式命名 (camelCase)。由于 HTML 特性是不区分大小写的,如果在 HTML 中直接书写 Vue 模板,需要使用短横线分割式 (kebab-case) 的命名来传递 props + +``` html +<!-- 在 JavaScript 中使用 camelCase --> +<van-cell isLink /> + +<!-- 在 HTML 中使用 kebab-case--> +<van-cell is-link /> +``` +