VueJ별 입력값 설정 및 가치내용 혼합

VueJ별 입력값 설정 및 가치내용 혼합

나는 이것을 시도한다:

<input type="text"
    name="username"
    v-model="user.name"
    :value="'The user name is: '+user.name">

입력 파일에 "The user name is: John Doe"라고 표시할 수 있습니까?

아니면 이 경우 반드시 계산된 값을 사용해야 합니까?

v-model 대신 값에 직접 바인딩하거나 계산된 속성 및 v-model을 생성하는 옵션이 있습니다.

https://codepen.io/aprouja1/pen/jwxagE

new Vue({
  el:'#app',
  data(){
    return{
      user:{
        name:'Bob'
      }
    }
  },
  computed:{
    nameString(){
      return `The user name is: ${this.user.name}`
    }
  }
})

당신이 요구하는 것은 약간 혼란스럽다고 생각합니다.기본적으로 텍스트 상자에 "The user name is: Bob"과 같은 텍스트가 포함되어 있으면 좋겠지만user.name사용자가 텍스트 상자 값을 "The user name is: "로 시작하지 않는 텍스트로 편집한 후에도 "Bob"과 같게 합니다.

현실적으로 "The user name is:" 텍스트는 텍스트 상자에 아예 없어야 합니다.<label>:

  <label>The user name is:</label>
  <input type="text" name="username" v-model="user.name">

또한 CSS를 사용하여 사용자 정의 "입력" 요소를 생성할 수도 있습니다.<label>그리고<input>모든 스타일이 제거되어 "사용자 이름:"이라는 텍스트가 편집 가능한 텍스트의 일부이지만 실제로는 그렇지 않은 것처럼 보이도록 요소를 선택합니다.

언급URL : https://stackoverflow.com/questions/44844402/set-input-value-by-vuejs-and-mixing-the-content-of-value