在Vue中可以使用方括号法获得想要的对象数据吗?

发布时间 2023-08-09 18:47:52作者: DawnTraveler

1.问题

Document
{{message}}

{{school.name}}{{school[mobile]}}

在这里

{{school.name}}{{school[mobile]}}

不可以使用方括号法获得想要的对象数据吗?

2.解决

在Vue.js中,使用双花括号({{}})来插值数据是正确的,但是方括号法([])用于动态属性访问的方式是不适用的。

在你的代码中,{{school.name}} 是正确的,它会显示 黑马程序员,但是 {{school[mobile]}} 是错误的。你应该使用点号来访问对象的属性,就像你在 school.name 中所做的那样。

如果你想要显示学校的手机号码,你可以这样做:

html
Copy code

{{school.name}} - {{school.mobile}}

这将会正确地显示:

Copy code
黑马程序员 - 400-618-9000
总结起来,使用双花括号({{}})来插值数据,使用点号来访问对象的属性是 Vue.js 模板语法中的正确方法,而方括号法([])通常用于 JavaScript 动态属性访问,但在 Vue 模板中不适用。