vue点击窗体1显示隐藏窗体1,点击窗体2更新隐藏窗体1内信息
时间: 2024-01-06 18:05:58 浏览: 23
好的,您可以尝试以下代码实现:
```html
<template>
<div>
<div class="form1" @click="toggleForm1">窗体1</div>
<div class="form2" @click="updateForm1">窗体2</div>
<div class="form1-content" v-show="showForm1">{{ form1Content }}</div>
</div>
</template>
<script>
export default {
data() {
return {
showForm1: false,
form1Content: '窗体1内容'
}
},
methods: {
toggleForm1() {
this.showForm1 = !this.showForm1;
},
updateForm1() {
this.form1Content = '窗体2更新的内容';
}
}
}
</script>
```
在上面的代码中,我们定义了一个 Vue 组件,其中包含了两个窗体(form1 和 form2)以及一个隐藏的窗体1内容(form1-content),初始情况下隐藏。当点击窗体1时,通过 `v-show` 指令控制隐藏窗体1内容的显示和隐藏;当点击窗体2时,通过修改 data 中的 `form1Content` 数据来更新隐藏窗体1内容的信息。