Vue의 v-model 지시문 분석(코드 포함)

이 글은 Vue(코드 포함)의 v-model 명령어 분석을 소개합니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

1. 명령어 설명

v-model은 기본적으로 사용자 입력 이벤트(onchange, onkeyup, onkeydown 등)를 모니터링하는 역할을 합니다. 공식 기본 구현 문서)를 사용하여 데이터를 업데이트하고 일부 극단적인 시나리오에 대한 특수 처리를 수행합니다.

2. 양식 입력 바인딩 방법 및 방법

2.1 입력 상자에 대한 양방향 데이터 바인딩 예:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label><input type="text" v-model="inputs"/><br/>
      <label>你在input框中输入了:</label><span>{{inputs}}</span>
    </div>
  </div>
</template>

<script>
    export default {
        name:"v-model",
      data(){
          return {
            title: &#39;v-model学习&#39;,
            inputs: &#39;&#39;
          }
      }
    }
</script>

<style scoped>
  .p1{
  text-align: left;
  }
  .spancss1{
      float: left;
      }
</style>

2.2 텍스트 영역 여러 줄 텍스트에 대한 양방향 데이터 바인딩 예:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label><textarea v-model="text"></textarea><br/>
      <label>你在textarea框中输入了:</label><span>{{text}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        text: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

2.3 체크박스는 데이터 바인딩을 구현합니다

단일 체크박스에 대한 데이터 바인딩의 예:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label><input type="checkbox" id="checkbox" v-model="checked">选我<br/>
      <label v-if="checked">选中了:</label>
      <label v-if="!checked">没选中:</label>
      <span>{{ checked }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        checked: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

여러 체크박스에 대한 데이터 바인딩의 예:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label>
      <input type="checkbox" id="vue1" value="vue1" v-model="checkedValues">vue1
      <input type="checkbox" id="vue2" value="vue2" v-model="checkedValues">vue2
      <input type="checkbox" id="vue3" value="vue3" v-model="checkedValues">vue3
      <br/>
      <label>选中了：</label><span>{{ checkedValues }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        checkedValues: []
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

2.4 라디오 버튼 구현 데이터 바인딩하고 선택한 라디오 버튼 값을 가져와 표시합니다.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <input type="radio" id="radio1" value="1" v-model="checked">男<br/>
      <input type="radio" id="radio2" value="2" v-model="checked">女<br/>
      <label> 选中了：{{ checked }}</label>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        checked: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

2.5 선택 상자 소개

방법 1: 선택 상자는 양방향 데이터 바인딩을 구현합니다. 먼저, 다음과 같은 경우의 상황을 소개합니다. 선택 상자는 단일 선택을 구현합니다. 라디오 버튼 상자의 옵션이 비활성화된 속성을 설정하면 옵션을 선택할 수 없습니다. 라디오 버튼 상자의 옵션에 값이 없으면 옵션 텍스트가 바인딩됩니다. 라디오 버튼 상자의 옵션에 값이 있는 경우 이 옵션을 선택하면 해당 옵션의 값이 바인딩됩니다.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option value="2">B</option>
        <option value="3">C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        selected: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

방법 2에서는 다음과 같은 상황을 소개합니다. 선택 상자의 다중 선택 먼저 선택 항목에 다중 속성을 추가해야 합니다. 옵션에 비활성화된 속성이 설정된 경우 라디오 버튼 상자의 옵션에 값이 없으면 이 옵션을 선택할 수 없습니다. , 옵션이 선택되면 이 옵션의 텍스트가 바인딩됩니다. 라디오 버튼 상자의 옵션에 값이 있으면 이 옵션이 이 옵션의 값에 바인딩됩니다. 그런 다음 Ctrl 키를 누르고 간단한 예는 다음과 같습니다:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <select v-model="selected" multiple>
        <option disabled value="">请选择</option>
        <option>A</option>
        <option value="2">B</option>
        <option value="3">C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        selected: []
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3. v-model modifier

3.1 .lazy

아래의 기본 상황에서는 v-model이 입력 상자의 값을 동기화합니다. 각 입력 이벤트가 트리거된 후 데이터를 사용합니다. (입력 방법이 텍스트를 결합하는 경우는 제외) 게으른 수정자를 추가하여 다음을 사용하도록 전환할 수 있습니다. onchange 이벤트는 입력 상자에 데이터가 입력되면 데이터가 즉시 변경되지 않습니다. 커서가 입력 상자를 벗어나면 데이터가 동기적으로 변경됩니다.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <!-- 在“change”时而非“input”时更新 -->
      <input type="text" id="names" v-model.lazy="msg" ><br/>
      <label>输入值：</label>{{msg}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        msg: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3.2 .number

사용자가 입력한 값을 숫자형으로 자동 변환하고 싶다면, type을 숫자형으로 정의하고, 사용자가 숫자형 데이터를 입력하면 v-model.number에 숫자 수정자를 추가합니다. 입력된 값은 자동으로 숫자형으로 변환됩니다. 사용자가 특수 문자 e를 입력하면 숫자 속성을 인식할 수 없습니다.

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <!-- 在“change”时而非“input”时更新 -->
      <input type="number" id="names" v-model.number="msg" ><br/>
      <label>输入值：</label>{{msg}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        msg: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3.3 .trim

사용자가 입력한 첫 번째와 마지막 공백 문자를 자동으로 필터링하려면 v-model에 트림 수정자를 추가하고 입력 상자 시작 부분에 공백을 몇 개 더 추가하면 됩니다. 나뭇잎, 트림 속성은 자동으로 끝 공백을 필터링합니다. 간단한 코드 예는 다음과 같습니다:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>无trim属性</label>
      <input type="text" id="names" v-model="msg1" ><br/>
      <label>输入值：</label>{{msg1}}<br/>
      <label>有trim属性</label>
      <input type="text" id="names2" v-model.trim="msg2" ><br/>
      <label>输入值：</label>{{msg2}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        msg1: &#39;&#39;,
        msg2: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

4.

4.1 自定义组件v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像输入框、单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。本文以自定义输入框和onchange事件为例，在输入框输入值，当光标离开以后输入值会输出绑定到置顶位置：

1. 在index中声明组件（在index声明的组件为全局组件，全局可用）：

Vue.component('base-text', {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `<input>`
});
=

2. 在要使用该组件的插件中声明：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
     <base-text v-model="msg"></base-text><br/>
      <label>你输入了:</label>{{msg}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        msg: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3. 结果示例如下：

相关推荐:

对4-v-bind指令的分析（附代码）

위 내용은 Vue의 v-model 지시문 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!