- 报错代码示例:
<div id="app">
<person v-bind:age="27" v-bind:msg="有 v-bind 前缀"></person>
<person age="27" msg="没有 v-bind 前缀"></person>
</div>
<script>
Vue.component('person', {
props: ['age', 'msg', 'man'],
template: `
<div>
{{ age }} 类型:{{ typeof age }} --- {{msg}}
</div>
`
});
const vm = new Vue({
el: '#app'
});
</script>
报错截图:
报错分析:使用v-bind
,变成一个 JavaScript 表达式:msg = 有 v-bind 前缀
,显然这种写法是错误的,因为 =
号右边不是一个正确的数据类型(字符串需要引号包裹)。
修复:v-bind:msg="'有 v-bind 前缀'"
(双引号内还要有单引号)
完整代码:
<div id="app">
<person v-bind:age="27" v-bind:msg="'有 v-bind 前缀'"></person>
<person age="27" msg="没有 v-bind 前缀"></person>
</div>
<script>
Vue.component('person', {
props: ['age', 'msg', 'man'],
template: `
<div>
{{ age }} 类型:{{ typeof age }} --- {{msg}}
</div>
`
});
const vm = new Vue({
el: '#app'
});
显示结果:
27 类型:number --- 有 v-bind 前缀
27 类型:string --- 没有 v-bind 前缀