css样式中@的使用 - 动态绑定class

css样式中@的使用 - 动态绑定class

引入图片常用写法

<div class="img-a"></div>

css

 <style scoped lang="less">
.container {
    background-color: #fffaf6;
    .img-a {
        width: 375px;
        height: 224px;
        position: absolute;
        background: url(../../assets/bg_ing.png) no-repeat center / cover;   //相对路径引入
        // z-index: -1000;
      }
}
</style>

@自定义路径名称引入–通常用在动态绑定样式中使用

  <div v-bind:class="month_class"></div>

data

data(){
    return{
      month_class: "",
      month_dict: {
            一月: "img-a-1",
            二月: "img-a-2",
            三月: "img-a-3",
            四月: "img-a-4",
            五月: "img-a-5",
            六月: "img-a-6",
            七月: "img-a-7",
            八月: "img-a-8",
            九月: "img-a-9",
            十月: "img-a-10",
            十一月: "img-a-11",
            十二月: "img-a-12",
          },
    }
}

methods

取res

 created() {
    this.getRegulation();
  },
  methods: {
    async getRegulation() {
      try {
        // let res = await this.$http.get("/cms/regulation/listAndr", {
        //   id: this.$route.query.id,
        // });
        let res = await this.$http.get(
          "/cms/regulation/listAndr?id=32位或64位-数字和大小写字母组合"
        );
          console.log(res.month)  //打印显示为  七月
        this.month_class = this.month_dict[res.month];
        console.log(this.month_class);
        this.$emit("regulationMonth", res.month);
        // this.title = "业务动态" + res.month;
        console.log(res);
        delete res.month;
        let reguListResult = [];
        Object.keys(res).map((v) => {
          let obj = {};
          if (res[v].length != 0) {
            obj.title = v;
            obj.children = res[v];
            reguListResult.push(obj);
          }
        });
        this.reguList = reguListResult;
      } catch (err) {
        throw new Error(err);
      }
    },

[] -取对象属性的用法

methods:{
     this.month_class = this.month_dict[res.month];  // [res.month]  在对象中取某一属性的具体值
            console.log(this.month_class); //显示为  img-a-7
}

css

 <style scoped lang="less">
@banner_img07: "../../assets/banner_07.png";  //也可以放在.img-a-7的同层级
.container {
    background-color: #fffaf6;
  .img-a-7 {
    width: 375px;
    height: 224px;
    position: absolute;
    background: url(@banner_img07) no-repeat center / cover;  //自定义路径名称引入使用
  }
}
</style>