字符串插值 Vue js

Question

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

我想结合“折叠”和 {{ thread_ref }} 来创建类似的东西： id="collapse_321"

当我尝试这样做并说要使用 v-bind 时，Vue 给了我一个错误。

我已经尝试过，但它只接受道具/数据名称的字符串，如何组合字符串和数据？

Answer 1

像这样做：

:id="'collape' + thread_ref"

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

Answer 2

你可以inline按照 Vamsi 的说法，但你也可以使用 a computed，它有一些更简洁的语法：

标记

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

查看模型

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

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

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

标记

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

查看模型

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

这是 JSFiddle：https ://jsfiddle.net/5o1dp7w5/