vue 变换背景颜色(末尾元素不能使用margin,用padding代替)

<div id="question">//关键
    <van-sticky>
      <back :title="title"></back>
    </van-sticky>
    <van-collapse v-model="activeName" accordion>
      <div class="list" v-for="(tit,i) in contents" :key="i">
        <van-collapse-item :title="tit.title" :name="i">{{tit.content}}</van-collapse-item>
      </div>
    </van-collapse>
  </div>
// 内容超出一屏,需要加上接口中使用
    getList() {
        document
          .getElementById("question")
          .setAttribute("style", "background-color:#f6f6f6");
    }
  },
  // 进入加入背景颜色
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f6f6f6");
  },
  // 离开去除背景颜色
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  }

 

是的,你可以使用 Vue.js 的 `.vue` 单文件组件来变 loading 属性的背景颜色。在 `.vue` 文件中,你可以使用 Vue 的模板语法和样式绑定来动态设置 loading 属性的背景颜色。 以下是一个示例,展示如何在 Vue 单文件组件中变 loading 属性的背景颜色: ```vue <template> <button type="submit" :class="{ 'custom-button': true, 'loading': loading }" :disabled="loading" @click="feedbackSubmit"> <span class="loading-animation"></span> <label>提交</label> </button> </template> <script> export default { data() { return { loading: false }; }, methods: { feedbackSubmit() { this.loading = true; // 在这里执行提交操作或其他异步操作 // 当操作完成后,将 this.loading 设置为 false,结束 loading 状态 } } }; </script> <style scoped> .custom-button { background-color: blue; /* 设置静态背景颜色为蓝色 */ color: white; /* 设置静态文字颜色为白色 */ } .loading { background-color: red; /* 设置 loading 背景颜色为红色 */ } .loading-animation { /* 设置 loading 动画样式 */ } </style> ``` 在上面的示例中,我们使用Vue 的动态类绑定 `:class` 来根据 `loading` 属性的状态来添加或移除 `loading` class。当 `loading` 为 true 时,按钮将应用 `loading` class,从而触发相应的样式变化。你可以在 `loading` 类的样式中设置 loading 属性的背景颜色。 请根据你的需求修示例中的颜色值,并根据实际情况在 `feedbackSubmit` 方法中执行提交操作或其他异步操作。当操作完成后,将 `this.loading` 设置为 false,以结束 loading 状态。 这只是一个简单的示例,你可以根据你的需求扩展和修 Vue 单文件组件的代码和样式来实现你想要的 loading 属性的背景颜色
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值