Vue 값 바인딩 문자열 연결

Vue 값 바인딩 문자열 연결

나는 이제 막 배우기 시작했다.Vue그래서 바보 같은 질문일 수도 있어요.Vue 컴포넌트를 작성했는데 값 바인딩에서 문자열 연결을 수행하려고 합니다.

이것처럼.

Vue.component('button-counter',{
    data:function(){
        return { count : 0}
    },
    template:"<input type='button' v-on:click='count++' v-bind:value='"Total Counter :"+count'/>"
})

하지만 그것은 잘못된 구문인 것 같다.제가 이걸 어떻게 할 수 있는지 누가 좀 도와주시겠어요?

예를 들어 다음과 같은 다른 방법이 있습니다.

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

하지만 가치 바인딩을 사용하는 것이 가능할까?

나는 이것을 계산된 속성으로 할 것이다.입력 타입에서 버튼으로의 전환도 생각할 수 있습니다만, 현재의 입력으로 해결하는 방법은 다음과 같습니다.

new Vue(({
  el: "#app",
  data:function(){
    return { count : 0}
  },
  computed: {
    buttonText() {
      return "Total Counter : " + this.count; 
    }
  }, 
  template:"<input type='button' v-on:click='count++' v-bind:value='buttonText'/>"
}))

다른 답변에서 이미 언급했듯이 계산 속성을 사용하여 식을 완전히 제거할 수 있지만 코드를 작동시키기 위해 반드시 필요한 것은 아닙니다.파일 컴포넌트를 1개만 사용했다면 템플릿은 정상적으로 동작했을 것입니다.여기서 '잘못된 구문'은 템플릿에 큰따옴표로 묶인 문자열 리터럴을 사용하여 중첩된 큰따옴표로 이어집니다.

큰따옴표는 슬래시로 빼야 합니다.이것은 Vue와는 무관하며 원시 JavaScript입니다.

template:"<input type='button' v-on:click='count++' v-bind:value='\"Total Counter :\"+count'/>"

틀리지는 않지만 줄여서 말하는 것도 추천합니다.v-on:click로.@click그리고.v-bind:value로.:value.

template: "<input type='button' @click='count++' :value='\"Total Counter :\" + count'/>"

큰따옴표는 피해야 합니다.템플릿이 큰따옴표로 둘러싸여 있기 때문입니다.

    template:"<input type='button' v-on:click='count++' v-bind:value='\"Total Counter :\"+count'/>"

이런 템플릿에 있으면 도망칠 필요가 없어요

    <template>
      <div>
        <input type='button' v-on:click='count++' v-bind:value="'Total Counter :'+count"/>
      </div>
    </template>

언급URL : https://stackoverflow.com/questions/52453519/string-concatenation-in-value-bind-in-vue