《Vue.js实战》第六章.表单与v-model

---

title: 第六章.表单与v-model
tags: 2019-11-30
notebook: Vue

6.1 基本用法

v-model用于表单元素上的数据双向绑定:如输入框中输入的内容就会实施映射到邦迪上的数据上

6.1.1 注意

使用v-module后,表单在控件显示的值只与绑定的数据有关,不在关心初始化时value的值,对于咋<textarea></textarea>之间的值也不会显示,
使用v-module时,如果使用中文输入法输入中文,一般在没有选定词组前,也就会在拼音阶段,Vue的数据不会更新,当敲下汉字时才会触发.如果希望总是更新,可以用@input来代替v-module.

例

<div id="app">
  <input type="text" @input="handleInput" placeholder="输入..">
  <p>输入逇内容是:{{message}}</p>
</div>
================================================================
var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    handleInput: function (e) {
      this.message = e.target.value
    }
  },
})

6.2.2 单选按钮

单选按钮在单独使用时,不需要v-module,直接使用v-bind绑定一个布尔值,为true时选中,为false时未选中

radio单独使用例

<div id="app">
  <input type="radio" name="" id="" :checked="picked">
  <label>单选按钮</label>
</div>
======================================================================
var app = new Vue({
  el: '#app',
  data: {
    picked: false
  }
})

radio组合使用互斥效果

<div id="app">
  <input type="radio" name="" v-model="picked" value="vue" id="vue">
  <label for="vue">Vue</label>
  <input type="radio" name="" v-model="picked" value="js" id=" js">
  <label for="js">JavaScript</label>
  <input type="radio" name="" v-model="picked" value="css" id="css">
  <label for="css">CSS</label>
</div>
======================================================================
var app = new Vue({
  el: '#app',
  data: {
    picked: 'js'
  }
})

6.2.2 复选框checkbox

与单选按钮类似,复选框在单独使用时也可以通过v-modle来绑定一个布尔值

单独使用例;

<div id="app">
  <input type="checkbox" name="" id="checked" v-model="checked">
  <label for="checked">选择状态:{{checked}}</label>
</div>
====================================================================
var app = new Vue({
  el: '#app',
  data: {
    checked: true
  }
})

组合使用

<div id="app">
  <input type="checkbox" name="" v-model="checked" value="vue" id="vue">
  <label for="vue">Vue</label>
  <input type="checkbox" name="" v-model="checked" value="js" id="js">
  <label for="js">JavaScript</label>
  <input type="checkbox" name="" v-model="checked" value="css" id="css">
  <label for="css">CSS</label>
  <p>你的选项是:{{checked}}</p>
</div>
========================================================================
var app = new Vue({
  el: '#app',
  data: {
    checked: ['css', 'js']
  }
})

6.2.3 下拉列表

<div id="app">
  <select name="" v-model="selected" id="">
    <option value="html">HTML</option>
    <option value="js">JavaScript</option>
    <option value="vue">Vue</option>
  </select>
  <p>你的选择:{{selected}}</p>
</div>
=====================================================================
var app = new Vue({
  el: '#app',
  data: {
    selected: 'js'
  }
})

如果option的value有值那么v-model优先匹配value,如果value没有值则匹配option的text

6.2.4 绑定值

单选按钮radio

<div id="app">
  <input type="radio" v-model="picked" :value="value" id="ra">
  <label for="ra">单选按钮</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>
</div>
====================================================================
 var app = new Vue({
  el: '#app',
  data: {
    picked: false,
    value: 123
  }
})

复选框checkbox

<div id="app">
  <input type="checkbox" name="" id="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label for="checkbox">复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>
</div>
============================================================================================================
var app = new Vue({
  el: '#app',
  data: {
    toggle: false,
    value1: 'a',
    value2: 'b'
  }
})

下拉列表select

<div id="app">
  <select name="" id="" v-model="selected">
    <option :value="{number : 123}">123</option>
  </select>
  <p>{{selected}}</p>
</div>
=========================================================
var app = new Vue({
  el: '#app',
  data: {
    selected: ''
  }
})

6.2.5 修饰符

.lazy 在失去焦点或回车后才更新数据

<div id="app">
<input type="text" v-model.lazy="message">
<!-- 此时的message并不是实时更新的,而是在失去焦点或回车后才更新的 -->
<p>{{message}}</p>
</div>
======================================================================
var app = new Vue({
  el:'#app',
  data:{
    message:''
  }
})

.number 将输入数据自动转换为NUmber类型

<div id="app">
  <input type="text" v-model.number="number">
  <p>{{typeof number}}</p>
</div>
======================================================================
var app = new Vue({
  el: '#app',
  data: {
    number: 123
  }
})

.trim 自取去除输入的首尾空格