Reactjs 在Vue中重新创建我在React中所做的东西

我正在处理我自己的个人投资组合，我将我的社交媒体保存为模板，以便在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>
            )}

{this.state.contact.map（（联系人，索引）=>
)}

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

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

{{social.title}

---

我对Vue也比较陌生。

在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>

{{social.title}

在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>

{{social.title}

您得到的错误是：

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">.

属性内部的插值已被删除。改用v-bind或冒号速记。
例如，使用而不是。

在我看来，有3种方法可以在Vue中设置html属性

您需要设置字符串文字。只需像编写常规HTML一样编写它

class=“myClass”

。您不能在这里插入javascript，这正是您试图做的，也是Vue发出的警告

您希望使用组件中定义的javascript变量。使用

v-bind

v-bind:class=“myClassVariable”

与上面相同，其中

：

只是

v-bind

的快捷方式

：class=“myClassVariable”

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

您得到的错误是：

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">.

属性内部的插值已被删除。改用v-bind或冒号速记。
例如，使用而不是。

在我看来，有3种方法可以在Vue中设置html属性

您需要设置字符串文字。只需像编写常规HTML一样编写它

class=“myClass”
。您不能在这里插入javascript，这正是您试图做的，也是Vue发出的警告

您希望使用组件中定义的javascript变量。使用
v-bind

v-bind:class=“myClassVariable”

与上面相同，其中
：
只是
v-bind
的快捷方式

：class=“myClassVariable”

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

谢谢你的回答<代码>
我最后尝试了这个，这个也成功了！谢谢你的回答<代码>

我最后尝试了这个，这个也成功了！