Question

我正在尝试在ASP.NET Core应用中使用Vue.js。我在页面上使用了某些标记助手，它们添加了自己的HTML属性，在某些情况下，我需要向同一属性添加v-bind。但是，当我这样做时，显式定义的属性总是胜过v-bind。例如：

<span v-bind:id="foo"></span>

在常规元素上，Vue会将其渲染为类似以下内容：

<span id="foo"></span>

简单明了的东西。但是，假设标签帮助程序添加了自己的id，因此经过Vue处理的HTML外观如下：

<span id="bar" v-bind:id="foo"></span>

Vue处理此内容时，结果为：

<span id="bar"></span>

当然，这是一个非常明显的边缘情况。如果所有内容都是手工编写的，则实际上您将不会同时包含两者。不过，似乎应该有某种方式可以覆盖v-bind。有什么我想念的东西吗？或者任何人有任何聪明的主意我该如何解决？

编辑

抱歉。我想我没有把它说得很清楚。

id只是一个示例。这不是CSS。我不能“仅使用class”。我需要能够绑定到必要的属性。
问题是我无法控制传入的属性。我的实际代码没有属性，只有v-bind:attribute。标记助手会在我的v-bind之外添加属性，我只是希望v-bind优先于属性本身。

Answer 1

您的问题基本上可以归结为：一些服务器端应用程序在Vue模板内呈现HTML标签，该模板同时具有显式设置的属性和在同一属性上的v-bind。产生此代码的大小无关紧要，因此问题实际上与ASP.NET Core无关，只关系到两次使用同一属性。现在，您希望Vue将其显式设置的属性替换为其绑定值。

这实际上是Vue在元素已经定义属性并且它具有绑定到该元素的值时将执行的操作。这甚至适用于文档甚至是explains this in some way的组件。该部分还说明了某些class和style属性的值合并：

对于大多数属性，提供给组件的值将替换组件设置的值。因此，例如，传递type="text"将替换type="date"并可能破坏它！幸运的是，class和style属性更聪明一些，因此两个值都合并在一起，成为最终值：form-control date-picker-theme-dark。

无论如何，如果运行此代码段，则可以看到Vue确实替换了绑定值时最初在值中设置的值：

var app = new Vue({
  el: '#app',
  data: {
    foo: 'baz',
  },
});

// show rendered HTML
document.getElementById('pre').addEventListener('click', function() {
  this.textContent = app.$el.innerHTML;
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <span id="bar" v-bind:id="foo">Foo bar baz</span>
</div>

<pre id="pre">(Click here to show the innerHTML of the app)</pre>

在已经指定属性的情况下，是否仍要绑定该属性？

1 个答案: