盒子高亮切换大小vue

在Vue.js中，实现盒子高亮切换大小的功能通常会涉及到CSS样式、JavaScript事件处理以及组件的交互设计。你可以使用`v-if`或`v-show`指令来控制元素的显示和隐藏，配合`:style`绑定动态样式来改变盒子的尺寸。

首先，在HTML模板中，可以定义一个按钮和一个容器元素：

<button @click="changeSize">切换大小</button>
<div :style="{ width: boxWidth, height: boxHeight }" v-bind:class="{ highlight: isHighlighted }"></div>

然后在你的Vue组件里，定义数据属性：

export default {
  data() {
    return {
      boxWidth: '100px', // 初始宽度
      boxHeight: '50px', // 初始高度
      isHighlighted: false, // 是否高亮，默认关闭
    };
  },
  methods: {
    changeSize() {
      this.isHighlighted = !this.isHighlighted; // 切换高亮状态
      // 如果你想改变大小，可以添加条件判断
      if (this.isHighlighted) {
        this.boxWidth = '200px'; // 高亮时宽度变大
        this.boxHeight = '100px'; // 或者高度变化
      } else {
        this.boxWidth = '100px';
        this.boxHeight = '50px';
      }
    },
  },
};

当点击按钮时，会触发`changeSize`方法，改变`isHighlighted`的状态，并相应地调整`boxWidth`和`boxHeight`。同时，`v-bind:class`用于根据`isHighlighted`的值应用不同的CSS类，使得高亮效果可见。