vue 方法间传递数据对象参数
程序员文章站
2022-07-14 18:24:06
...
功能:将data对象作为参数传递给方法,在方法中对不同的参数进行相应操作。
如下,实现简单实现根据传入的不同p标签key对象,在相应p标签中显示相应内容:
<template>
<div>
<!-- 可以通过如下两种方式绑定标签内容 -->
<p>{{map.p1Content}}</p>
<p>{{map.p2Content}}</p>
<p>{{map.p3Content}}</p>
<p v-html="map.p4Content"></p>
</div>
</template>
<script>
export default {
name: 'TransferParam',
data () {
return {
map: {
p1Content: '',
p2Content: '',
p3Content: '',
p4Content: '',
},
}
},
methods: {
// 给对象赋值
setPValue (contentKey, content) {
this.map[contentKey] = content
},
},
created () {
// 调用方法
this.setPValue('p1Content', "第一个p标签内容。")
this.setPValue('p2Content', "第二个p标签内容。")
this.setPValue('p3Content', "第三个p标签内容。")
this.setPValue('p4Content', "第四个p标签内容。")
}
}
</script>
推荐阅读