代码之家 › 专栏 › 技术社区 › Chris Pratt

当一个属性已经被指定时,是否仍然需要绑定该属性?

asp.net-core vue.js

-1

Chris Pratt · 技术社区 · 6 年前

我正在尝试使用Vue。js在ASP中的应用。NET核心应用程序。我在页面上使用了某些标记帮助程序,它们可以添加自己的HTML属性,在某些情况下,我需要添加一个 v-bind 同样的属性。然而,当我这样做时,显式定义的属性总是胜过 v形绑定 .例如:

<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形绑定 推翻我有没有遗漏什么,或者有没有人有什么好主意让我可以解决这个问题?

编辑

对不起,伙计们。我想我没有说得那么清楚。

身份证件 这里只是一个例子。这不是CSS的事情。我不能“只用 class 我需要能够绑定到必要的属性。
问题是我无法控制即将出现的属性。我的实际代码没有这个属性,只是 v-bind:attribute 。标记帮助程序正在将属性添加到我的 v形绑定 ,我只想要我的 v形绑定 优先于属性本身。

1 回复 | 直到 6 年前

poke 6 年前

您的问题基本上可以归结为:一些服务器端应用程序在Vue模板中呈现一个HTML标记,该模板具有显式设置的属性和 v-bind 基于相同的属性。这段代码由什么生成并不重要,所以这个问题实际上与ASP无关。NET内核中,重要的是同一属性被使用两次。现在,您希望Vue将显式设置的属性替换为其绑定值。

当一个元素已经定义了一个属性,并且它有一些值要绑定到该元素时,Vue实际上就是这么做的。同样的情况也适用于文档中包含的组件 explains this in some way .这一部分还解释了某些情况下发生的价值合并 class 和 style 属性:

对于大多数属性,提供给组件的值将替换组件设置的值。例如,传球 type="text" 将取代 type="date" 可能会把它弄坏!幸运的是 班 和 风格 属性更智能一些,因此两个值都被合并,形成最终值: 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>