Vue表单控件绑定

前面的话

　　本文将详细介绍Vue表单控件绑定

基础用法

　　可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据

　　[注意]v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。应该通过JS组件的data选项中声明初始值

【type:text】

<div id="example">

  <input v-model="message" placeholder="edit me">

  <p>Message is: {{ message }}</p>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    message:''

  }

})

</script>

　　实际上v-model是:value和@input事件的语法糖

<div id="example">

  <input :value="message" placeholder="edit me" @input="message=$event.target.value">

  <p>Message is: {{ message }}</p>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    message:''

  },

})

</script>

【textarea】

<div id="example">

  <div>

    <span>Multiline message is:</span>

    <p style="white-space: pre-line">{{ message }}</p>

  </div>

  <textarea v-model="message" placeholder="add multiple lines"></textarea>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    message:''

  }

})

</script>

　　[注意]在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替

【type:checkbox】

<div id="example">

  <input type="checkbox" id="checkbox" v-model="checked">

  <label for="checkbox">{{ checked }}</label>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    checked:false

  }

})

</script>

<div id="example">

  <div>

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames">

    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

    <label for="mike">Mike</label>

  </div>

  <div>

   <span>Checked names: {{ checkedNames }}</span>

  </div>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    checkedNames:[]

  }

})

</script>

【type:radio】

<div id="example">

  <div>

    <input type="radio" id="one" value="One" v-model="picked">

    <label for="one">One</label>

  </div>

  <div>

    <input type="radio" id="two" value="Two" v-model="picked">

    <label for="two">Two</label>

  </div>

  <div>Picked: {{ picked }}</div>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    picked:''

  }

})

</script>

【select】

单选列表

<div id="example">

  <select v-model="selected">

    <option disabled value="">请选择</option>

    <option>A</option>

    <option>B</option>

    <option>C</option>

  </select>

  <span>Selected: {{ selected }}</span>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    selected: ''

  }

})

</script>

　　[注意]如果v-model表达初始的值不匹配任何的选项，<select>元素就会以”未选中”的状态渲染。在iOS中，这会使用户无法选择第一个选项，因为这样的情况下，iOS不会引发change事件。因此，像以上提供disabled选项是建议的做法

多选列表

<div id="example">

  <select v-model="selected" multiple>

    <option>A</option>

    <option>B</option>

    <option>C</option>

  </select>

  <span>Selected: {{ selected }}</span>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    selected: []

  }

})

</script>

动态选项

　　用v-for渲染

<div id="example">

  <select v-model="selected">

    <option v-for="option in options" :value="option.value">

      {{ option.text }}

    </option>

  </select>

  <span>Selected: {{ selected }}</span>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    selected: 'A',

    options: [

      { text: 'One', value: 'A' },

      { text: 'Two', value: 'B' },

      { text: 'Three', value: 'C' }

    ]

  }

})

</script>

绑定value

　　对于单选按钮，勾选框及选择列表选项， v-model绑定的value通常是静态字符串（对于勾选框是逻辑值）

<!-- 当选中时，`picked` 为字符串 "a" -->

<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->

<input type="checkbox" v-model="toggle">

<!-- 当选中时，`selected` 为字符串 "abc" -->

<select v-model="selected">

  <option value="abc">ABC</option>

</select>

　　但若要绑定value到Vue实例的一个动态属性上，就可以用v-bind实现，并且这个属性的值可以不是字符串

【复选框】

<div id="example">

  <input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">

  <span>{{ toggle }}</span>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    toggle:'',

    a:true,

    b:false

  }

})

</script>

【单选按钮】

<div id="example">

  <input type="radio" v-model="pick" :value="a">

  <span>{{ pick }}</span>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    pick:'',

    a:true

  }

})

</script>

【选择列表】

<div id="example">

  <select v-model="selected">

    <option :value="{ number: 123 }">123</option>

    <option :value="{ number: 234 }">234</option>

    <option :value="{ number: 345 }">345</option>

  </select>

    <span>Selected: {{ selected.number }}</span>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    selected:''

  }

})

</script>

修饰符

【.lazy】

　　在默认情况下， v-model在input事件中同步输入框的值与数据，但可以添加一个修饰符 lazy ，从而转变为在change事件中同步

　　下列例子中，光标移出输入框时，才同步数据

<div id="example">

  <input v-model.lazy="message" placeholder="edit me">

  <p>Message is: {{ message }}</p>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    message:''

  }

})

</script>

【.number】

　　如果想自动将用户的输入值转为Number类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符number给v-model来处理输入值

　　这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型

<div id="example">

  <div>

    <input v-model="age1" type="number">

    <span>{{type1}}</span>

    <p>普通输入: {{ age1 }}</p>

  </div>

  <div>

    <input v-model.number="age2" type="number">

    <span>{{type2}}</span>

    <p>number修饰符输入: {{ age2 }}</p>

  </div>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    age1:'',

    age2:'',

  },

  computed:{

    type1:function(){

      return typeof(this.age1)

    },

    type2:function(val){

      return typeof(this.age2)

    },

  }

})

</script>

【.trim】

　　如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

<div id="example">

  <input v-model.trim="msg">

  <p>msg is: {{ msg }}</p>

</div>

<script>

var example = new Vue({

  el: '#example',

  data:{

    msg:''

  }

})

</script>

巴特西

Vue表单控件绑定

前面的话

基础用法

绑定value

修饰符

最新文章

热门文章