vue ref 颜色改变

您可以使用Vue的ref来绑定元素，然后使用JavaScript来改变元素样式。以下是一个简单的例子：

HTML代码：

<div ref="myDiv" @click="changeColor">我是一个DIV</div>

Vue代码：

export default {
  methods: {
    changeColor() {
      this.$refs.myDiv.style.backgroundColor = 'red';
    }
  }
}

这个例子中，我们使用ref来绑定一个DIV元素，并在@click事件中调用changeColor方法。在changeColor方法中，我们使用JavaScript来改变DIV元素的背景颜色为红色。

相关问题

ref改变样式 vue_vue修改element-ui table样式更改

要修改 Element UI 表格组件的样式，可以使用自定义样式类和覆盖默认样式。以下是一些基本的步骤：

1. 在 Vue 组件中引入 Element UI 表格组件。

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui';

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  data() {
    return {
      tableData: [
        {
          name: 'John Doe',
          age: 30,
          address: '123 Main St',
        },
        // ...
      ],
    };
  },
};
</script>

2. 在组件中定义自定义样式类。

.table-wrapper {
  border: 1px solid #ccc;
}

.el-table__header {
  background-color: #f5f5f5;
}

.el-table__body {
  background-color: #fff;
}

3. 将自定义样式类应用于表格组件。

<template>
  <div class="table-wrapper">
    <el-table :data="tableData" class="my-table">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<style>
.my-table {
  width: 100%;
}

.el-table__header {
  background-color: #f5f5f5;
}

.el-table__body {
  background-color: #fff;
}
</style>

在上面的示例中，我们在 `div` 元素上应用了 `.table-wrapper` 样式类，并在表格组件上应用了 `.my-table` 样式类。然后，我们覆盖了表格组件的默认样式，例如表头和表体的背景颜色。

vue 使用 ref 添加删除类名

可以使用 `ref` 来获取元素的引用，然后使用 `classList` 对象来添加和删除类名。示例代码如下：

<template>
  <div>
    <button @click="toggleClass">Toggle Class</button>
    <div ref="myDiv" class="my-class">My Div</div>
  </div>
</template>

<script>
export default {
  methods: {
    toggleClass() {
      const myDiv = this.$refs.myDiv
      myDiv.classList.toggle('active')
    }
  }
}
</script>

<style>
.my-class {
  background-color: #eee;
  padding: 20px;
}

.active {
  background-color: #ccc;
}
</style>

在上面的示例中，我们使用 `ref="myDiv"` 来获取元素的引用，然后在 `toggleClass()` 方法中使用 `classList.toggle()` 来切换 `active` 类名。这样，每次单击按钮时，就会添加或删除 `active` 类名，从而改变元素的背景颜色。