Vue模板中的动态属性访问和字符串拼接操作

动态属性访问

<div v-for="item in data.list.personCount">
	<div class="figurecard">
		<div class="figurename">{{ data.list['personName' + item] }}</div>
	</div>
</div>

其中{{ data.list['personText' + item] }}为动态属性访问

当data.list.personCount为3时，v-for会依次渲染出data.list.personName1，data.list.personName1，data.list.personName1的内容。

在 JavaScript 中，可以使用方括号 [ ] 来动态地访问对象的属性。
具体来说，‘personName’ + item 是一个字符串拼接的表达式，它会将 ‘personName’ 和 item 的值拼接成一个新的字符串作为属性名。然后，通过将这个新的字符串作为属性名放在方括号内，就可以使用动态属性访问的方式从对象 data.list 中获取对应的属性值。

字符串拼接

<div v-for="item in parseInt(data.profile.personCount)">
	<el-form-item >
		<el-input :placeholder="'人物' + (item) + '姓名'" v-model="data.intro.intro" />
	</el-form-item>
</div>

其中"'人物' + (item) + '姓名'"为模板中的字符串拼接

在 Vue的模板中，可以利用动态绑定的语法来将数据和 DOM 元素绑定起来。
如data.profile.personCount为3时，:placeholder会依次为：人物1姓名，人物2姓名，人物3姓名。

虽然字符串拼接操作和动态属性访问语法的语法形式有些相似，但它们的作用是不同的。动态属性访问语法主要用于在模板中根据数据动态生成属性名，而字符串拼接操作则主要用于将多个字符串拼接起来生成一个新的字符串。