vue.js - 如何在Vue按钮中注册id div？

Question

有这样一个结构：

<div v-show="visible" id="ten"></div>
<div v-show="visible" id="twelve"></div>
<button v-if="!isHidden" v-on:click="visible=!visible, 
isHidden = true">Click Me!</button>

<script>
export default {
 data() {
  return {
    visible: false,
    isHidden: false,
          }
/*.....................................*/

我可以在这一行中指定只显示“十”个div吗？

v-on:click="visible=!visible, isHidden = true"

标签： vue.jsbutton

Answer 1

如果要单独控制子元素的可见性，则需要一个单独的变量。例如：

data() {
  return {
    ten_isVisible: true,
    twelve_isVisible: true
  }
}

<div v-show="ten_isVisible" id="ten"></div>
<div v-show="twelve_isVisible" id="twelve"></div>

当然，您需要单独的控件（按钮、复选框，无论您喜欢什么）来切换不同元素的可见性。