vue学习---表单控件绑定

in Vue教程 with 0 comments, 4143 views

vue

表单控件绑定

基础用法

你可以在表单元素(input及textarea等)上使用v-model指令创建双向数据绑定. Vue会根据input类型自动选择正确的方式来更新元素。尽管有点神奇，v-model本质上是一个用来监听用户input事件以更新数据的语法糖,同时也处理了一些极端情况。

注：v-model并不关心input或者textarea提供的初始值,它总是会将Vue实例的数据作为真正的来源.

对于一些需要IME的语言(中文、日文、韩文等),你会注意到v-model在IME(输入法)拼写过程中，vue不会触发更新.如果你需要满足这种需要，可以使用input事件代替.

文本框(Text)

<div id="app-1">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
</div>

var app1 = new Vue({
  el: '#app-1',
  data: {
    message:''
  }
})

在线DEMO

多行文本框(Multiline text)

<div id="app-2">
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message:'多行文本'
  }
})

在线DEMO

注: 在textarea中插值表达式(<textarea>{{text}}</textarea>)不起作用,需使用v-model代替.

复选框(Checkbox)

单个复选框绑定的布尔值:

<div id="app-3">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    checked:false
  }
})

在线DEMO

多个复选框绑定到同一个数组下:

<div id="app-4">
    <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>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    checkedNames: []
  }
})

在线DEMO

单选按钮(option)

<div id="app-5">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    //默认选择One
    picked:'One' 
  }
})

在线DEMO

Select

单选：

<div id="app-6">
  <select v-model="selected">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    // 默认选择A
    selected:'A'
  }
})

在线DEMO

多选(一样也是绑定到相同数组下):

<div id="app-7">
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

var app7 = new Vue({
  el: '#app-7',
  data: {
    // 默认选择B
    selected:['B']
  }
})

在线DEMO

动态选项，用 v-for 渲染：

<div id="app-8">
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

var app8 = new Vue({
  el: '#app-8',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

在线DEMO

绑定 value

对于单选按钮，勾选框及选择框选项来说，v-model 绑定的 value 通常是静态字符串（对于勾选框是布尔值）：

<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle">
<!-- `selected` is a string "abc" when selected -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind指令实现，并且这个属性的值可以不是字符串。

复选框(Checkbox)

<div id="app-9">
  <input
    type="checkbox"
    v-model="toggle"
    v-bind:true-value="a"
    v-bind:false-value="b"
  >
  {{toggle}}
</div>

var app9 = new Vue({
  el: '#app-9',
  data: {
    toggle:'',
    a:true,
    b:false
  }
})

// // when checked:
// app9.toggle === app9.a
// // when unchecked:
// app9.toggle === app9.b

在线DEMO

单选按钮(option)

<div id="app-10">
<input type="radio" v-model="pick" v-bind:value="a">
</div>

var app10 = new Vue({
  el: '#app-10',
  data: {
    pick:'',
    a:'1'
  }
})
// when checked:
app10.pick === app10.a

在线DEMO

Select Options

<div id="app-11">
  <select v-model="selected">
    <!-- inline object literal -->
    <option v-bind:value="{ number: 123 }">123</option>
  </select>
</div>

var app11 = new Vue({
  el: '#app-11',
  data: {
    selected:{
      
    }
  }
})
// when selected:
// typeof app11.selected // -> 'object'
// app11.selected.number // -> 123

在线DEMO

修饰符(Modifiers)

.lazy

在默认情况下，v-model 在input 事件中同步输入框值与数据(除了IME的情况)，可以添加一个lazy修饰符，从而改到在 change 事件中同步：

<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入转为 Number 类型，可以为v-model添加一个number修饰符来管理：

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

这是个很有用的特性,因为即使显式声明了type为number,input文本框总是会返回一个string字符串.

.trim

如果想自动将用户的输入去除两侧空格(😅前后空格)，可以为v-model添加一个trim修饰符来管理：

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

组件中使用v-model (v-model with Components)

如果你还不熟悉Vue的组件系统,可以先略过.

HTML的内置input 类型不一定总能满足我们的需求.幸运的是,Vue也已经帮我们想到了，允许我们自己去创建一个具有自定义行为可复用的输入框(inputs),这些 input输入框甚至可以和 v-model 一起使用！要了解更多，请等待之后组件章节中的讲解😃

Responses ${replyToWho} / Cancel Reply