vue中动态改变less变量

在Vue中动态改变Less变量，可以通过动态绑定样式的方式来实现。

首先，在Vue组件的`style`标签中引入less文件，并定义需要动态改变的less变量。例如，我们定义了一个`color`变量：

<style lang="less">
@color: red;
</style>

然后，我们可以通过绑定样式的方式来改变`color`变量的值。在Vue模板中，可以使用`class`或`style`的绑定语法来实现。

如果我们想要根据条件改变`color`变量的值，可以通过判断条件来绑定不同的样式类，从而改变变量值。

<template>
  <div :class="{ 'red-color': condition }"></div>
</template>

在Vue实例中，我们定义了`condition`变量，根据该变量的值来绑定不同的样式类。在`data`中，可以设置`condition`的初始值，并在需要的时候修改该值。

<script>
export default {
  data() {
    return {
      condition: false
    }
  },
  methods: {
    changeColor() {
      this.condition = !this.condition;
    }
  }
}
</script>

最后，在less文件中根据样式类来设置`color`变量的不同值。

.red-color {
  @color: blue;
}

这样，当`condition`为`true`时，div元素将绑定`red-color`样式类，从而改变了`color`变量的值为蓝色。当`condition`为`false`时，div元素不会绑定该样式类，`color`变量的值为红色。

通过这种方式，我们可以在Vue中动态改变less变量的值，实现样式的动态修改。