Vue V-model双向绑定

  • 博主： 牛宝宝
  • 发布时间：
  • 527 次浏览
  • 🎨前端
  • Vue

通过双向绑定，可以从vue实例获取数据，也可以通过前端输入数据，进行数据传输(传输数据一般按照String传输，可用{{typeof arg}} 查看数据类型)

1、input[type=text] , input[type=textarea]

<input type="text" v-model="message">
<input type="textarea" v-model="message">
<!--把message绑定到input里面，更改message值，input中也会改变，改变input中的值，message值会改变-->
<!--等价于-->
<input type="text" :value="message" @input="message=$event.target.value">
<!--绑定value的值，更改message后更改value,@input为输入框值，当按下Enter或者input框失去焦点触发，更改message的值为输入的值-->

2、input[type=radio]

<input type="radio" name="sex" value="男" v-model="sex">男
<input type="radio" name="sex" value="女" v-model="sex">女
<!--当vue实例中的data{sex:'男'} sex值为男，选中男，若在html选中女，则sex值改为女-->
<!--当两个radio的v-model值一样时，可以不用写name-->

3、input[type=checkbox]

<input type="checkbox" name="hobbies" v-model="isChecked" value="篮球">篮球
<!--当为单选框时，isChecked为boolean值，如果选中data{isChecked:true}-->
<input type="checkbox" name="hobbies" v-model="isChecked" value="足球">足球
<input type="checkbox" name="hobbies" v-model="isChecked" value="篮球">篮球 
<input type="checkbox" name="hobbies" v-model="isChecked" value="排球">排球
<!--当为多选框时,isCheck为数组。 如果是三个都选中data{isChecked:\['篮球','足球','排球'\]}-->
<lable v-for="item in hobbies" :for="item">
    <input type="checkbox" :id="item" :value="item" v-model="hobbies1" >{{item}}
</lable>
<!--循环打印checkBox，选中后传值给data:{hobbies1:\[\]}-->

4、select

<select name="fruit" v-model="fruits">
    <option value="苹果"></option>
    <option value="橘子"></option>
    <option value="香蕉"></option>
</select>
<!--单选为一个值，多选为数组-->

5、v-model修饰符

<!--lazy:当input框Enter或者失去焦点时，更改数据-->
<input type="text" v-model.lazy="message">
<!--number:传输数据按照number传送数据，否则输入数字为String-->
<input type="number" v-model.number="message">
<!--trim:去除输入框两端的空格-->
<input type="text" v-model.trim="message">