Question

我试图更改SELECT case when Isnumeric(FileStatusID) = 1 then cast(insull(FileStatusID,0) as decimal(18,2)) else 0 end as FileStatusID FROM ( SELECT * FROM [dbo].[TBL_FileStatus] WHERE IsActive = 1 AND (((@p_valuemin BETWEEN MinValue AND MaxValue) AND MaxValue <> @p_valuemin) OR ((@p_valuemax BETWEEN MinValue AND MaxValue) AND MinValue <> @p_valuemax)) UNION SELECT * FROM [dbo].[TBL_FileStatus] WHERE IsActive = 1 AND (((MinValue BETWEEN @p_valuemin AND @p_valuemax) AND MinValue <> @p_valuemax) OR ((MaxValue BETWEEN @p_valuemin AND @p_valuemax) AND MaxValue <> @p_valuemin) )) TS标记文本的颜色，但是失败了，我猜测是因为我使用v-html包含了<a>文本。

正常的CSS无效，但是您可以通过javaScript进行更改。

<a>

我想知道是否有一种简单的方法。

 methods: {
    changeVhtmlStyle () {
      let textHrefSoloLearn = document.getElementsByClassName('description')[0].childNodes[0]
      console.log (textHrefSoloLearn)
      textHrefSoloLearn.style.color = '#000000'
    }
  },

  mounted: function() {
    this.changeVhtmlStyle()
  }

Answer 1

您可以这样编写“内部CSS”

DrawerLayout drawerLayout = findViewById(R.id.drawerLayout);
drawerLayout.setDrawerElevation(0);

或

<style scoped>
    .parent /deep/ .child{}
</style>

Answer 2

您正在将颜色分配给局部作用域变量txetHrefSoloLearn。您可以绑定样式并为其指定颜色

<div class="description" :style="txetHrefColor" v-html="education.description"></div>

data:{
   textHrefColor:null 
}

methods: {
changeVhtmlStyle:function() {
  this.textHrefColor='#000000';
    }
},

mounted: function() {
this.changeVhtmlStyle()
}

Answer 3

我真的不知道您的代码的样子，但是，您可以在数据中这样做

  data() {
    return {
      richText:
        '<style scoped>.section-title{color:#ffecd1;font-size:64px;font-weight:700;margin-bottom:32px}.img-header{width:480px;height:auto;object-fit:cover;border-radius:16px;padding-right:16px}.section-motto{color:#ffecd1;font-size:28px;line-height:1.7em;margin-bottom:64px}.text-wrapper{background-color:#932f2d;border-radius:16px;padding:24px}.section-description{color:#ffecd1;font-size:24px;line-height:1.7em}</style><div class="section-title-wrapper"><h2 class="section-title">Ormawa</h2><p class="section-motto">Motto UKM Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid, maiores qui. Debitis vel nulla nihil laudantium veniam undesapiente quos cum.</p></div><div class="row d-flex align-items-center"><div class="col-4 col-md-4 col-12"><img class="img-header" src="https://via.placeholder.com/400x200" alt="ukm-cover" /></div><div class="col-lg-8 col-md-8 col-12 text-left"><div class="text-wrapper"><p class="section-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit.Eveniet molestiae iste quod blanditiis laborum fugiat odit earumvoluptatem impedit, neque, et accusantium possimus animidoloribus modi in totam eligendi explicabo.</p></div></div></div>'
    };
  }

之后，您可以像这样插入它：

<template>
 <div>
  <div v-html="richText"></div>
 </div>
</template>

如果您感到困惑，我只需要在富文本中添加一个<style scoped></style>即可。在正常情况下，我的样式将如下所示：

<style scoped>
  .section-title-wrapper {
    text-align: left;
  }

  .section-title {
    color: #ffecd1;
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 32px;
  }

  .img-header {
    width: 480px;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    padding-right: 16px;
  }

  .section-motto {
    color: #ffecd1;
    font-size: 28px;
    line-height: 1.7em;
    margin-bottom: 64px;
  }

  .text-wrapper {
    background-color: rgb(147, 47, 45);
    border-radius: 16px;
    padding: 24px;
  }

  .section-description {
    color: #ffecd1;
    font-size: 24px;
    line-height: 1.7em;
  }
</style>

我的富文本将如下所示：

  <div class="section-title-wrapper">
    <h2 class="section-title">Ormawa</h2>
    <p class="section-motto">
      Motto UKM Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      Aliquid, maiores qui. Debitis vel nulla nihil laudantium veniam unde
      sapiente quos cum.
    </p>
  </div>

  <div class="row d-flex align-items-center">
    <div class="col-4 col-md-4 col-12">
      <img
           class="img-header"
           src="https://via.placeholder.com/400x200"
           alt="ukm-cover"
           />
    </div>
    <div class="col-lg-8 col-md-8 col-12 text-left">
      <div class="text-wrapper">
        <p class="section-description">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.
          Eveniet molestiae iste quod blanditiis laborum fugiat odit earum
          voluptatem impedit, neque, et accusantium possimus animi
          doloribus modi in totam eligendi explicabo.
        </p>
      </div>
    </div>
  </div>

是的，如果您从本地资产输入图像，则该图像不起作用，因为到目前为止，我仍然找不到原因，但是最好使用外部链接。

Vue.js-CSS在v-html元素上不起作用

3 个答案: