Vue.js实例学习：表单输入绑定

一、基础用法

用 v-model 指令在表单 < input> 及 < textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。
它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

1、 文本

这里v-model指令与数据message相绑定 并 实时监听用户的输入事件以更新message数据并展示。

<div id="app">
  <!--这里value表面上并未生效，但实际以后运用的地方会很多-->
  <input v-model="message" placeholder="edit me" value="input" type="text"></input>
  <p>Message is：{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    message:""
  },
});
</script>

效果：在input里输入内容，下面Message实时动态更新

2、多行文本

<div id="app">
  <textarea v-model="message" placehoder="edit me"></textarea>
  <!-- white-space: nowrap,规定段落中的文本不进行换行 -->
  <p style="white-space: nowrap">Message：{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    message:""
  },
});
</script>

效果：在textarea里输入内容，下面Message实时动态更新

3、复选框

（1） 单个复选框，绑定到布尔值：

<div id="app">
      <input type="checkbox" id="checkbox" v-model="checkmessage"></input>
      <label for="checkbox">{{checkmessage}}</label>
  </div>
  <script type="text/javascript">
  var vm = new Vue({
    el:"#app",
    data:{
      checkmessage:false
    },
  });
  </script>

效果图：开始只有false.

选中false后，变为ture

（2）多个复选框，绑定到同一个数组：

<div id="app">
    <input type="checkbox" id="bty" v-model="checkName" value="bty"></input>
    <label for="bty">bty</label>
    <input type="checkbox" id="js" v-model="checkName" value="js"></input>
    <label for="js">js</label>
    <p>checkName:{{checkName}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    checkName:["hhh"],//checkName:[]同理
  },
});
</script>

效果：点击下面复选框，观察checkName值的变化

4、单选按钮

<div id="app">
  <input type="radio" v-model="message" id="one" value="one"></input>
  <label for="one">one</label>
  <input type="radio" v-model="message" id="two" value="two"></input>
  <label for="two">two</label>
  <p>你选择的是：{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    message:""
  },
});
</script>

效果图：道理同上

5、选择框

（1）一个选项时：
直接在select中绑定数据，option数据就是绑定数据。

<div id="app">
  <select v-model="myseleted">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <p>{{myseleted}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    myseleted:""
  },
});
</script>

效果图：


（2）多选时 (绑定到一个数组)：

<div id="app">
  <select v-model="myseleted" multiple>
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <p>{{myseleted}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    myseleted:[]
  },
});
</script>

效果图：选择前：

多选后：

二、值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值),像下面：

<!-- 当选中时，`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>

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

例1、单选按钮

<div id="app">
  <input id="my" type="radio" v-model="pick" v-bind:value="newdata"></input>
  <label for="my">my</label>
  <p>{{pick}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    pick:"",
    newdata:"i am newdata"
  },
});
</script>

效果：点击后，pick值改变，实际中应用中再将newdata整为变量即可真正的动态变化。


例2、选择框的选项

<div id="app">
  <select v-model="pick">
    <option disabled value="">请选择</option>
    <option :value="message.one">1</option>
    <option :value="message.two">2</option>
    <option :value="message.three">3</option>
  </select>
  <p>{{pick}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    pick:"i am old pick data",
    message:{
      one:1,
      two:2,
      three:3
    }
  },
});
</script>

例3、复杂的Dome

<div id="example">
  <h3>单选按钮</h3>
  <div v-show="items.length!=0">
    <ul>
      <li v-for="(item,index) in items">
        <label :for="'radio-'+item.id" @click="setCheckValue(item)">
          <input type="radio" name="radio"
            :id="'radio-'+item.id"
            :data-id="'food-'+item.id" 
            :checked="index==0"
            :value="item.value"
            v-model="checkValue"></input>
          <span>{{item.value}}</span>
        </label>
      </li>
    </ul>
    <p>您选择了：<span>{{checkValue}}</span></p>
    <button @click="showCheck(checkId)">按钮</button><span>{{checkId}}</span>
  </div>
</div>
<script>
  var itemData = [
    {id: '11001', value: '香蕉'},
    {id: '11002', value: '苹果'},
    {id: '11003', value: '梨子'}, 
    {id: '11004', value: '葡萄'}
  ]
  var vm = new Vue({
    el: '#example',
    data: {
      items: '',
      checkValue: '',
      checkId: ''
    },
    methods: {
      initData: function () {
        var self = this;
        self.items = itemData;
        if (itemData.length != 0) {
          self.checkId = 'food-' + self.items[0].id;
          self.checkValue = self.items[0].value;  
        }
      },
      setCheckValue: function (item) {
        this.checkId = 'food-' + item.id;
      },
      showCheck: function () {
        console.log(this.checkId)
      }
    },
    mounted: function () {
      this.initData();
    }
})

</script>

效果：选择对应选项，下面的水果名 和 id都会实时变化。点击“按钮“控制台还会输出已选择水果的id.

三、修饰符

1、.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

例子：
效果：聚焦在input输入时message不会实时动态更新，只有在input失去焦点时(即点击非input部分)，message才会动态更新。

<div id="app">
  <input v-model.lazy="message" placeholder="edit me" type="text"></input>
  <p>Message is：{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    message:""
  },
});
</script>

2、.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

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

例子：在input输入字符串12,但转换typeof后 变为 number

<div id="app">
  <input v-model.number="age" type="text"></input>
  <p>age is：{{typeof age}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    age:""
  },
});
</script>

3、.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

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

四、在组件上使用 v-model

这一部分会在下一篇 “Vue.js实例学习：组件“ 讲。