[Vue.js] v-모델의 기본 사용법과 수식자의 사용 방법

본 보도에 관하여

v-model의 행동과 v-model에서 input 탭 값을 가져오는 Tips를 기록합니다.

카탈로그

• v-모델
· v-모델 사용 시도
・v-model에 사용되는 수식자

이른바 v-모델

v-모델이 도대체 뭐야.
근거공식 문서
v-model 지시를 사용하여form의 input 요소,textarea 요소,select 요소의 양방향 데이터 연결을 만들 수 있습니다.이것은 입력 요소 형식을 바탕으로 자동으로 요소를 업데이트하는 정확한 방법을 선택했다.
듣건대응, 좀 이해가 안 돼.
어쨌든 코드를 써서 이해해 주세요.

시험 v-model

이것은 매우 기본적인 사용 방법으로 먼저 HTML에 다음과 같다.
index.html

<!-- Vue.jsが読み込まれている前提 -->
<div id="app">
  <input type="text" v-model="sample_v_model" placeholder="sample_v_model"><br>
  <p>ここにsample_v_modelの値をリアルタイムに表示: {{ sample_v_model }}</p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    sample_v_model: ''
  }
})
</script>

input 라벨에 v-model="sample_v_model"라는 기술이 있습니다.
그리고script 라벨의 내용sample_v_model: ''에 대한 설명이 있습니다.
new Vue로서 Vue 실례를 만들어야 하는데, 그걸 설치한 앞머리가 #app로 둘러싸인 곳으로, HTML 쪽v-model="sample_v_model"과 js 쪽sample_v_model: ''이 연결되어 있기 때문이다.
공식 페이지에 적힌'쌍방향(two-way) 데이터 귀속은 v-model 지시를 사용할 수 있다'는 부분은 이에 해당한다.
js 쪽은 Sample입니다.v_모델이라는 데이터가 있는데, 페이지가 읽히고 표시될 때, 그 내용은 비어 있고, input 탭도 비어 있습니다.따라서 페이지를 표시할 때
/input 태그의 내용은 비어 있습니다
・js에 정의된 데이터 내용도 공백
그러니까
↓ 이런 느낌.

이렇게 하면 v-모델의 기본 용법을 이해할 수 있다.

v-model에 사용되는 수식자

이번에는 input 탭의 내용을 계산하는 데 수치가 필요합니다. HTML에도 그 데이터를 반영해야 할 때 v-for 부분이 순조롭지 않아서'100'을 입력하면 됩니다.'1', '0', '0' 을 입력한 것으로 여겨지기 때문에 이 문제를 해결하기 위해number 수식자를 사용했다.
그 실제 코드는 여기 있어요.

<div class="">
  <label for="number_of_years">運用する年数</label>
  <input type="number" v-model.number="number_of_years" placeholder="運用する年数を入力してください">年
</div>

(略)

<tr v-for="number_of_year in number_of_years">
  <th>{{ number_of_year }}年後</th>
  <td>{{ Math.round(amountOfShare * Math.pow(rateOfIncrease, number_of_year)) }}</td>
</tr>

이렇게 하면 수치를number로 순조롭게 변환할 수 있다of_years를 v-for에서 사용할 수 있는 수치의 부분에 넣을 수 있습니다.
이번에는number를 사용했지만 다른 수식어가 있어서 다음과 같이 정리했습니다.
수식부
컨텐트
lazy
입력 상자에 입력한 시간이 아니라 입력이 끝난 시간에 데이터를 바꿉니다.
number
입력한 값의 유형을 자동으로 숫자로 변환합니다.
trim
자동으로 입력한 값에서 공백 제거
각자 사용한 타이밍에 구체적인 예가 나오면 추가로 기록할 수 있을 것 같다.