Question

我正在处理自己的个人档案，并且将社交媒体另存为模板，以便仅在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用于离子社会图标时创建相同的效果，但是由于要接收有关使用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的新手。

Answer 1

您得到的错误是：

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属性。

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

class="myClass"。您无法在此处插入javascript，这是您要尝试执行的操作，也是Vue警告的内容。
您要使用组件中定义的javascript变量。使用v-bind。

v-bind:class="myClassVariable"
与上述相同，其中:只是v-bind的快捷方式。

:class="myClassVariable"

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

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

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

Answer 2

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

在Vue中重新创建我在React中所做的事情

2 个答案: