Vue中直接使用:class="$style.mainHeader"提示绑定错误

[张天星]

这个是header.vue中的源码

<template>
  <header :class="$style.mainHeader">
    <h1>JTodo</h1>
  </header>
</template>

<style lang="stylus" scoped>
.main-header{
  text-align center
  h1{
    font-size 100px
    color: rgba(175, 47, 47, 0.4)
    font-weight 100
    margin 20px
  }
}
</style>

这个是错误内容：[Vue warn]: Property or method "$style" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
这个是vue-loader.config中的配置：

module.exports = (isDev) =>{
    return {
        //删除vue中的文本空格
        preserveWhitepace:true,
        //将所有的样式提取到独立的CSS文件（提取出来之后，每个模块加载，都需要加载整个CSS文件）
        extractCSS:!isDev,
        //
        cssModules:{
            //css的文件名（文件路径）
            localIdentName:'[path]-[name]-[hash:base64:5]',
            //变量命名规则（骆驼式命名法），css中的zhang-zw会被自动转成zhangZw
            camelCase:true
        },
    }
}

我主要是看着视频教程学习的。。。而现在的问题就是，照做下来，结果却不如预期，简直悲剧。

[usecf]

<style lang="stylus" scoped>
.main-header{
text-align center
h1{
font-size 100px
color: rgba(175, 47, 47, 0.4)
font-weight 100
margin 20px
}
}
</style


你css的属性有些没带":" 会不会是这个问题

[潇湘忆梦]

不是这个写法吧，不是v-bind:class="..."这样的吗？

参考地址：https://cn.vuejs.org/v2/guide/class-and-style.html

[scscms太阳光]

vue的数据变量不能以_和$开头，以$开头的都是vue内部私有变量。比如$attrs,$refs,$root等。 详见：https://cn.vuejs.org/v2/api/#data 以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。 －－－－－－－－－－－ 换句话说，你的代码要改成： :class="$data.$style.mainHeader" 才能正常运行！但是不推荐这样做。

[张天星]

引用 1 楼 usecf 的回复:

<style lang="stylus" scoped> .main-header{ text-align center h1{ font-size 100px color: rgba(175, 47, 47, 0.4) font-weight 100 margin 20px } } </style 你css的属性有些没带":" 会不会是这个问题

.vue文件里面，这种写法是正常的。 问题出在<header :class="$style.mainHeader">这一句。 我原本：<header class="main-header">是没有问题的

[张天星]

引用 2 楼 潇湘忆梦 的回复:

不是这个写法吧，不是v-bind:class="..."这样的吗？ 参考地址：https://cn.vuejs.org/v2/guide/class-and-style.html

简写，没有区别的

[张天星]

引用 3 楼 scscms太阳光 的回复:

vue的数据变量不能以_和$开头，以$开头的都是vue内部私有变量。比如$attrs,$refs,$root等。 详见：https://cn.vuejs.org/v2/api/#data 以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。 －－－－－－－－－－－ 换句话说，你的代码要改成： :class="$data.$style.mainHeader" 才能正常运行！但是不推荐这样做。

我没有声明一个叫style的变量，我觉得，这个应该也是vue内部私有变量。。或许是webpack解析的时候做了什么？ 我搞不清楚，现在只能换回<header class="main-header">

[自然框架]

<div v-bind:class="{ active: isActive }"></div>

后面要跟一个bool值的。 比如

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

这些都是官网上面的。基础应用把。 至于$能不能直接用，这个不太清楚。

[张天星]

<style lang="stylus" module> //css文件使用 module 不是scoped 我从百度上找到答案了，是类型声明错了，现在修正后可以用了。