字符串插值Vue js [重复]答案

【问题标题】：string interpolation Vue js [duplicate]字符串插值Vue js [重复]
【发布时间】：2018-05-27 07:41:02
【问题描述】：

我正在尝试将字符串和道具结合起来，为 bootstrap 手风琴创建一个独特的 id。

我想结合 "collapse" 和 {{ thread_ref }} 来创建类似：id="collapse_321"

当我尝试执行此操作时，Vue 给了我一个错误并说要使用 v-bind。

我试过了，但它只接受道具/数据名称的字符串，我怎样才能将字符串和数据结合起来？

【问题讨论】：

【解决方案1】：

这样做：

:id="'collape' + thread_ref"

当您使用v-bind 或: 绑定属性时，" " 内的任何内容都是 javascript。所以你可以做任何你在 JavaScript 中做的单行表达式

【讨论】：

【解决方案2】：

您可以按照 Vamsi 的说明使用 inline，但您也可以使用 computed，它的语法更简洁：

标记

<div :id="collapse_id"></div>

查看模型

computed: {
  collapse_id() {
    return 'collapse_' + this.thread_ref
  }
},

但是，这依赖于 thread_ref 在 data 中可用，这里是 JSFiddle：https://jsfiddle.net/j9s3zhp2/

如果将它放在v-for 中，您可以使用method 实现相同的效果：

标记

<div v-for="ref in refs"> 
  <div :id="collapse_id(ref)"></div>
</div>

查看模型

methods:{
  collapse_id(thread_ref){
    return 'collapse_' + thread_ref
  }
}

【讨论】：