Question

我需要在电子邮件签名中放置内联！重要的css声明，否则Gmail无法正确显示它。

我的样式通过以下方式绑定：样式，如果我在声明中放置！重要，则删除该属性。

...
linkStyle: {
     "textDecoration": "none !important", //this gets autoremoved
     "color": "#334593"
}
...
<a :style="linkStyle"></a>
...

只有颜色被应用，我甚至试过这个：

...
<a :style="linkStyle" style="text-decoration !important"></a>
...

要尝试欺骗它，它会被text-decoration:none应用但没有!important flag。

我输了。任何人都可以告诉我一个解决方法吗？

Answer 1

如果您未在textDecoration中加入linkStyle，则最后一个示例有效：

＆＃13;

const v = new Vue({
  el: '#app',
  data: {
    linkStyle: {
      color: "#334593"
    }
  },
  mounted() {
    document.getElementById('content').textContent = this.$el.innerHTML;
  }
});

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <a href="#" style="text-decoration: none !important" :style="linkStyle">Whatever</a>
</div>
<code id="content">
</code>

＆＃13;

Answer 2

过了一段时间后，我发现你必须使用＆＃34; text-decoration＆＃34;而是工作：

linkStyle: {
    'text-decoration': 'none !important',
    color: "#334593"
}

在 vue.common.js 中，它到达此行：

el.style.setProperty(name, val.replace(importantRE, ''), 'important');

name = textDecoration。在这种情况下，字符串textDecoration不起作用，应为text-decoration。

VueJS正在删除我重要的CSS声明

2 个答案: