vue组件中camelCased (驼峰式) 命名与 kebab-case(短横线命名)

HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模版,则没有这些限制。”文章来源地址https://www.yii666.com/article/758368.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prop动态=绑定</title>
<script src="vue.js"></script>
</head>
<body> <div id="app">
<input type="text" v-model="message">
<child v-bind:my-message="message"></child>
<!--此处的my-message只能是短横线命名(若为驼峰式则全部转换为小写。)-->
</div>
<script>
Vue.component('child',{
// props:['my-message'],
props:['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式,他们在此处是相互转换的 template:'<p>{{myMessage}}</p>'
// 此处有限制,是字符串模板,{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。若为短横线的命名方式,则会报错。如下图:
});
new Vue({
el:'#app',
data:{
message:''
}
})
</script>
</body>
</html>

  文章地址https://www.yii666.com/article/758368.html网址:yii666.com<网址:yii666.com文章来源地址:https://www.yii666.com/article/758368.html

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png