如何在vue中隐藏和显示div onchange？

在Vue中隐藏和显示div可以通过使用v-show或v-if指令来实现。

1. 使用v-show指令： v-show指令根据表达式的真假值来显示或隐藏元素。当表达式为true时，元素会显示出来；当表达式为false时，元素会隐藏起来。

示例代码：

<template>
  <div>
    <button @click="toggleDiv">Toggle Div</button>
    <div v-show="showDiv">This is a div</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDiv: true
    };
  },
  methods: {
    toggleDiv() {
      this.showDiv = !this.showDiv;
    }
  }
};
</script>

在上面的例子中，通过点击按钮来切换showDiv的值，从而隐藏或显示div元素。

1. 使用v-if指令： v-if指令会根据表达式的真假值来添加或移除元素。当表达式为true时，元素会被渲染到DOM中；当表达式为false时，元素会被移除。

示例代码：

<template>
  <div>
    <button @click="toggleDiv">Toggle Div</button>
    <div v-if="showDiv">This is a div</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDiv: true
    };
  },
  methods: {
    toggleDiv() {
      this.showDiv = !this.showDiv;
    }
  }
};
</script>

同样地，通过点击按钮来切换showDiv的值来隐藏或显示div元素。

v-show与v-if的区别：

• v-show通过CSS的display属性来隐藏或显示元素，元素始终会渲染在DOM中，只是控制它是否可见，适用于频繁切换显示状态的场景。
• v-if根据条件动态地添加或移除元素，如果条件为false，元素不会在DOM中渲染，适用于条件不经常改变的场景。

推荐的腾讯云相关产品： 腾讯云提供了云开发服务，其中涵盖了云函数、云数据库、云存储等功能，可用于支持前端开发和后端开发的各种需求。您可以参考腾讯云云开发产品介绍链接了解更多详细信息。

参考链接：

• v-show文档：https://cn.vuejs.org/v2/api/#v-show
• v-if文档：https://cn.vuejs.org/v2/api/#v-if
• 腾讯云云开发产品介绍：https://cloud.tencent.com/product/tcb