Vue Form 사용 사례에 대한 자세한 설명

이번에는 Vue Form 사용 사례에 대해 자세히 설명하겠습니다. Vue Form 사용 시 주의사항은 무엇인가요?

1. v-model 지시어를 사용하여 요소에 양방향 데이터 바인딩을 만들 수 있습니다.

그러나 v-model은 본질적으로 단지 구문 설탕일 뿐입니다. 사용자 입력 이벤트를 수신하여 데이터를 업데이트하고 일부 극단적인 시나리오에 대한 특수 처리를 수행하는 역할을 담당합니다. v-model은 모든 양식 요소의 value, selected 및 selected 속성의 초기 값을 무시하고 항상 Vue 인스턴스의 데이터를 데이터 소스로 사용합니다. 구성 요소의 데이터 옵션에서

JavaScript

를 통해 초기 값을 선언해야 합니다.

텍스트, 텍스트 영역, 라디오, 체크박스 및 선택의 기본 사용법을 읽은 후 코드 세트:

<p id="app7">
  <input type="text" v-model="message"><label>{{message}}</label></br>
  <textarea v-model="message1"></textarea><label>{{message1}}</label></br>
  <!--单选按钮在单独使用时,不需要v-model,直接使用v-bind 绑定一个布尔类型的值,为真时选中,为否时不选-->
  <input type="radio" :checked="picked"><label>单选按钮</label></br>
  <!--如果是组合使用来实现互斥选择的效果,就需要v-model 配合value来使用：-->
  <input type="radio" v-model="sex" value="boy"><label>男</label>
  <input type="radio" v-model="sex" value="girl"><label>女</label></br>
  <!--复选框使用数组类型的数据匹配-->
  <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>
  <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>
  <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>
  <!--单选时的选择框,多选时加multiple属性就可以了-->
  <!--但我们一般都不用原生的这种下拉框，不美观，扩展功能也不好，一般会用插件或自己封装一个-->
  <select v-model="select">
   <option disabled value="">请选择</option>
   <option>html</option>
   <option value="js">javascript</option>
   <option>css</option>
  </select>
  <!--用 v-for 渲染的动态选项-->
  <select v-model="selected">
   <option v-for="option in options" :value="option.value">
    {{option.text}}
   </option>
  </select>
 </p>
var app7 = new Vue({
 el: '#app7',
 data:{
  message: '单行文本',
  message1: '多行文本',
  picked: true,
  sex: 'boy',
  hobby: ['爬山','滑雪'],
  select: 'css',
  selected: 'A',
  options: [
   { text: 'One', value: 'A' },
   { text: 'Two', value: 'B' },
   { text: 'Three', value: 'C' }
  ]
 }
});

2. 값 바인딩

라디오 버튼, 체크박스 및 선택 목록은 단독으로 사용하거나 단독으로 사용할 수 있습니다. 개별적으로 선택한 모드에서 v-model에 의해 바인딩된 값은 정적 문자열 또는 부울 값이지만 비즈니스에서는 동적 데이터를 바인딩해야 하는 경우가 있습니다. 이 경우 이를 달성하기 위해 v-bind를 사용할 수 있습니다. 양식에서 라디오, 체크박스 및 선택에 일반적으로 사용되는 값 바인딩을 읽은 후:

 <p id="app8">
  <!--单选按钮,利用value动态绑定，在选中时，app.picked === app.value, 值都是boy-->
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>
  <!--复选框,利用true-value与false-value动态绑定,勾选时,app.toggle == app.value1; 未勾选时，app.toggle == app.value2-->
  <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label>复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>
  <!--选择列表,当选中时,app.selected 是一个Object ，所以app.selected.number == 123-->
  <select v-model="selected">
   <option :value="{number:123}">123</option>
  </select>
  {{selected.number}}
 </p>
var app8 = new Vue({
 el: '#app8',
 data:{
  picked: false,
  value: 'boy',
  toggle: false,
  value1: 'a',
  value2: 'b',
  selected: ''
 }
});

3. 수정자

이벤트 수정자와 마찬가지로 v-model에도 제어용 수정자가 있습니다. 데이터 동기화 타이밍. 일반적으로 사용되는 수식어 Lazy, Number 및 Trim을 읽은 후 코드 세트

<p id="app9">
  <!-- .lazy:
  在输入框中， v-model 默认是在input 事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），
  使用修饰符.lazy 会转变为在change 事件中同步，这时，message 并不是实时改变的，而是在失焦或按回车时才更新。-->
  <input type="text" v-model.lazy="message">
  <p>{{message}}</p>
  <!--.number:
  使用修饰符.number 可以将输入转换为Number 类型，否则虽然你输入的是数字，但它的类型其实是String ，比如在数字输入框时会比较有用-->
  <input type="text" v-model.number="number">
  <p>{{typeof number}}</p>
  <!-- .trim:
  修饰符.trim 可以自动过滤输入的首尾空格-->
  <input type="text" v-model="text">
  <p>{{text}}</p>
 </p>
var app9 = new Vue({
 el: '#app9',
 data:{
  message: '',
  number: '',
  text: ''
 }
});

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사에 주목하세요. PHP 중국어 웹사이트!

추천 도서:

Vue 프로젝트에서 발생하는 도메인 간 문제를 올바르게 해결하는 방법

vue-cli axios 요청 방법 및 도메인 간 처리를 사용하는 방법

위 내용은 Vue Form 사용 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!