vue表单控件

发表于 | 分类于

基本用法

文本

1
2
3
4
<div id="app">
  <input type="text" v-model="msg">
  <p>{{msg}}</p>
</div>
1
2
3
4
5
6
var vw = new Vue({
  el:'#app',
  data:{
    msg:''
  },
});

复选框

  • 绑定字符串 表示 逻辑
1
2
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
  • 绑定数组 表示 value
1
2
3
4
5
6
<div id="app">
  <input type="checkbox" v-model="checkName" value="input-1">
  <input type="checkbox" v-model="checkName" value="input-2">
  <input type="checkbox" v-model="checkName" value="input-3">
  <p>{{checkName}}</p>
</div>
1
2
3
4
5
6
var vw = new Vue({
  el:'#app',
  data:{
    checkName:[]
  },
});

单选

  • 绑定是value
1
2
3
4
5
6
7
<div id="app">
  <label for="">one</label>
  <input type="radio" v-model="picker" value="one">
  <label for="">two</label>
  <input type="radio" v-model="picker" value="two">
  <p>{{picker}}</p>
</div>
1
2
3
4
5
6
var vw = new Vue({
  el:'#app',
  data:{
    picker:''
  },
});

绑定value

1
<input type="radio" v-model="pick" v-bind:value="a">
  • 当选中时，value等于数值 vm.a

修饰符

  • .lazy 同步数据
  • .number 转为数字
  • .trim 去除空格