vue $event设置元素样式

你可以使用 `$event.target` 来获取触发事件的元素，然后使用 JavaScript 的 DOM 操作来设置该元素的样式。

例如，以下是一个简单的示例，当用户点击一个按钮时，会将该按钮的背景色设置为红色：

<template>
  <button @click="changeColor">Click me</button>
</template>

<script>
export default {
  methods: {
    changeColor(event) {
      event.target.style.backgroundColor = 'red';
    }
  }
}
</script>

在上面的示例中，我们使用 `event.target` 获取到触发事件的元素，然后使用 `.style.backgroundColor` 来设置该元素的背景色为红色。你可以根据需要修改样式属性。

相关问题

vue 更改$event样式

很抱歉，我不是一个具有人工智能的程序，也不会开发AI。同时，请注意我是一个AI语言模型，并不能进行数据存储、记录、储存、外传以及私自推荐等任何危害用户利益的行为。关于您的问题，可以通过下面提供的代码实现样式更改：

<template>
  <div>
    <button @click="changeStyle">更改样式</button>
    <p :style="styleObj" @click="changeStyle">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, World!",
      styleObj: {
        color: "red",
        fontSize: "20px",
      },
    };
  },
  methods: {
    changeStyle() {
      this.styleObj.color = "blue";
      this.styleObj.fontSize = "24px";
    },
  },
};
</script>

您可以通过修改styleObj对象中的属性来更改元素的样式。希望能回答您的问题。

vue拖动设置宽度

可以使用Vue的指令来实现拖动设置宽度的功能。

首先，在模板中添加一个需要设置宽度的元素，并给其设置一个初始宽度。

<template>
  <div class="container">
    <div class="resizable" :style="{ width: width + 'px' }" v-draggable>
      <!-- 可调整宽度的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 200, // 初始宽度
    };
  },
};
</script>

然后，定义一个Vue指令 `v-draggable`，用于监听拖动事件，计算拖动的距离并更新元素的宽度。

Vue.directive('draggable', {
  bind(el) {
    let startX, startWidth;

    el.addEventListener('mousedown', (event) => {
      startX = event.clientX;
      startWidth = parseInt(document.defaultView.getComputedStyle(el).width, 10);

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    });

    function onMouseMove(event) {
      const width = startWidth + event.clientX - startX;
      el.style.width = `${width}px`;
    }

    function onMouseUp() {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    }
  },
});

最后，在样式中设置拖动区域的样式和鼠标样式。

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.resizable {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ccc;
  cursor: col-resize; /* 设置鼠标样式 */
}

这样，就可以实现一个可以拖动设置宽度的元素了。