v-model 指令

目录

一、输入框

        二、复选框

三、单选按钮

四、select 列表

五、修饰符 

        1、.lazy

        2、.number 

        3、.trim 

---

 v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值,v-model 会根据控件类型自动选取正确的方法来更新元素。

一、输入框

在 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {
  { message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{
  { message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Input',
    message2: '使用v-model实现多行文本框的双向绑定'
  }
})
</script>

二、复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

<div id="app">
  <p>单个复选框：</p>
  &