문자열 보간 Vue js

문자열 보간 Vue js

이 질문에는 이미 답변이 있습니다.

"Interpolation inside attribute is removed"를 해결하려면 어떻게 해야 합니까?v-bind 또는 colon sermark를 사용하시겠습니까?"Vue.js 2 (6개의 답변)

닫힘4년 전에요.

스트링과 소품을 조합하여 독특하게 만들려고 합니다.id부트스트랩 아코디언을 위해서요

"collapse"와 {{ thread_ref }}를 조합하여 다음과 같은 것을 만들고 싶습니다.id="collapse_321"

Vue가 v-bind를 사용하라고 하면 오류가 발생합니다.

해봤는데 프롭/데이터 이름의 문자열만 받습니다.문자열과 데이터를 조합하려면 어떻게 해야 하나요?

다음과 같이 합니다.

:id="'collape' + thread_ref"

안에 있는 모든 것" "속성을 바인딩할 때v-bind또는:javascript 입니다.따라서 JavaScript에서 수행하는 단일 행 식을 수행할 수 있습니다.

넌 할 수 있다.inlineVamsi에 의해 명시된 대로이지만,computed의 구문은 다음과 같습니다.

마크업

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

모델 표시

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

단, 이는 다음 항목에 의존합니다.thread_ref에서 이용할 수 있다dataJSFiddle은 다음과 같습니다.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
  }
}

JSFiddle은 다음과 같습니다.https://jsfiddle.net/5o1dp7w5/

언급URL : https://stackoverflow.com/questions/47792638/string-interpolation-vue-js