0

我正在处理我自己的个人作品集，我将我的社交媒体保存为模板，以便在 React 中使用此代码。

  {this.state.contact.map((contact, index) => 
                <a className="social-icons" href={`${contact.href}`} target="_blank" rel="noopener noreferrer" key={index}>
                    <h3 className={`ion-social-${contact.title}`}></h3>
                </a>
            )}

我试图在将 Vue 用于 ion-social-icons 时创建相同的效果，但我很难弄清楚如何实现它，因为我刚刚收到一个关于使用 v-bind:class 的错误帮助不大。这是我目前正在尝试的。

 <p class="social-media snippet ion-social-{{social.title}}" v-for="social in socials" v-bind:key="social">
  {{ social.title }}
</p>

我对 Vue 也比较陌生。

4

2 回答 2

3

你得到的错误是：

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. 
For example, instead of <div class="{{ val }}">, use <div :class="val">.

在我的脑海中，有 3 种方法可以在 Vue 中设置 html 属性。

  1. 你想设置一个字符串文字。就像编写常规 HTML 一样编写它。

    class="myClass". 你不能在这里插入 javascript，这是你想要做的，也是 Vue 警告的。

  2. 您想使用组件中定义的 javascript 变量。使用v-bind.

    v-bind:class="myClassVariable"

  3. 同上， where:只是v-bind.

    :class="myClassVariable"

您的类绑定的工作示例如下所示，

<p class="social-media snippet" :class="'ion-social-'+social.title" ...

里面的值:class="..."只是一个表达式，其中'ion-social'是一个附加了变量的字符串文字social.title。一旦您的模板变得凌乱，现在就是 imo，您应该从模板中删除逻辑并将其放入组件中。

于 2018-08-03T04:01:15.733 回答
1

在 Vue 1.0 中可以在 HTML 属性中使用插值，但自 2.0 起不再支持。在这里，您需要使用 v-bind，然后像在 JS 中一样使用字符串添加变量。

<p
  v-for="social in socials"
  v-bind:class="'social-media snippet ion-social-' + social.title"
  v-bind:key="social"
>
  {{ social.title }}
</p>
于 2018-08-03T04:00:15.293 回答