Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Vue自学：props属性的小驼峰写法为什么不被支持
Blogger Information
Blog 250
fans 3
comment 0
visits 321519
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue自学：props属性的小驼峰写法为什么不被支持
梁凯达的博客
Original
1873 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  8.     <title>Vue自学：props属性的小驼峰写法为什么不被支持</title>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         {{message}}
  13.         <!-- 当props里面的属性名称使用了小驼峰标识的时候，v-bind:中的属性要在驼峰标识的大写字母前使用-，并且全部小写 -->
  14.         <!-- 否则HTML标签不支持小驼峰标识，会导致内容无法展示 -->
  15.         <!-- 正确使用:v-bind:c-info:"info" -->
  16.         <!-- 这里的属性值为该数组或对象的名称 -->
  17.         <cpn v-bind:c-info="info"></cpn>
  18.     </div>
  19. </body>
  20. <template id="cpn">
  21.     <div>
  22.         <!-- 传递过来的值也养要个props里面的值一样，要大写 -->
  23.         <h3>{{cInfo}}</h3>
  24.     </div>
  25. </template>
  26. <script type="text/javascript">
  27.     //定义一个局部组件的常量
  28.     const cpn = {
  29.         // 绑定的是template标签中的id值
  30.         template:'#cpn',
  31.         data(){
  33.         },
  34.         props:{
  35.             //当组件的传递值为小驼峰标识时
  36.             //1、要么属性的全部都要对应大写
  37.             //2、要么绑定属性的该大写字母前面要加-
  38.             // cInfo是另外取的属性名称
  39.             cInfo:{
  40.                 type:Object,
  41.                 default(){
  42.                     return []
  43.                 }
  44.             }
  45.         }
  46.     }
  48.     const app = new Vue({
  49.         el:'#app',
  50.         data:{
  51.             message:'tesh this message',
  52.             info:{
  53.                 name:'梁凯达',
  54.                 age:'27',
  55.                 height:'178cm',
  56.             }
  57.         },
  58.         methods:{
  60.         },
  61.         computed:{
  63.         },
  64.         components:{
  65.             cpn,
  66.         }
  67.     })
  68. </script>
  69. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post