vue中less如何拿到data里面的值

在Vue.js中使用Less预处理器来获取数据中的值，需要通过模板绑定（template binding）来实现。首先，你需要确保安装了`vue-loader`和`less-loader`这两个插件，它们能让你在`.vue`文件中使用Less并访问数据。

1. 安装依赖：

npm install vue-style-loader less-loader vue-loader --save-dev

2. 在`.vue`组件的`<style>`标签里引入Less并使用变量或计算属性：

<style lang="less" scoped>
@color: {{ yourData.value; }}; // 将yourData替换为你实际的数据名

body {
  background-color: @color;
}
</style>

这里，`{{ yourData.value; }}`是 Vue 的双花括号语法，它会将 `yourData.value` 的值插入到样式中。

3. 在`data()`函数中定义数据：

export default {
  data() {
    return {
      yourData: { value: 'red' } // 示例，你可以替换为你需要的任意值
    };
  }
};

现在，页面加载时，`yourData.value`的值会被渲染到对应的Less变量上。如果`yourData`的值发生变化，页面上的样式也会相应更新，展示了数据驱动的特性。