vue中怎么通过点击事件获取和改变dom的style

在Vue中，可以通过点击事件来获取和改变DOM的style。具体步骤如下：

1. 首先，在组件中定义一个data属性，用来存储DOM的style。例如，可以定义一个属性名为styleObject的data属性。

data() {
  return {
    styleObject: {}
  }
}

2. 在模板中，将需要改变style的DOM元素绑定上该data属性。例如，可以使用v-bind来绑定style属性。

<div :style="styleObject"></div>
<button @click="changeStyle">点击改变style</button>

3. 在methods中编写changeStyle方法，该方法将会在点击事件触发时执行。可以在该方法中获取DOM的style并对其中的属性进行更改。

methods: {
  changeStyle() {
    // 获取DOM的style
    const dom = document.querySelector('div');
    const computedStyle = window.getComputedStyle(dom);
    
    // 更改style中的属性
    this.styleObject = {
      ...this.styleObject,
      color: computedStyle.color === 'red' ? 'blue' : 'red',
      fontSize: computedStyle.fontSize === '12px' ? '16px' : '12px'
    };
  }
}

上述代码中，我们通过window.getComputedStyle方法获取到了DOM元素的计算样式并将其存储在computedStyle变量中。然后，根据需求更改了styleObject中的属性。每次点击事件触发时，这些属性会根据之前的值进行切换。

这样，点击按钮时，就可以获取和改变DOM的style了。