字符串插值Vue js

Question

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

我想结合“崩溃”和{{thread_ref}}来创建类似：id="collapse_321"

的内容

当我尝试使用v-bind时，Vue会给我一个错误。

我试过但是只接受一个prop / data名称的字符串，我该如何组合一个字符串和数据呢？

Answer 1

这样做：

:id="'collape' + thread_ref"

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

Answer 2

您可以按照Vamsi的说明computed，但您也可以使用<div :id="collapse_id"></div> ，它有一些更简洁的语法：

<强>标记

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

查看模型

thread_ref

但是，这取决于data中v-for的可用性，这里是JSFiddle：https://jsfiddle.net/j9s3zhp2/

如果它放在method内，您可以使用<div v-for="ref in refs"> <div :id="collapse_id(ref)"></div> </div> 实现相同的目标：

<强>标记

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

查看模型

/var/log/eb-activity.log

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