5.2.vue入门基础学习笔记-基础指令介绍(表单绑定v-model)

表单绑定v-model

1 v-model简介

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
new Vue({
  el: '#app',
  data: {
    message: 'hello world!'
  }
})

在这段代码中，如果修改vue.message的值，那么p标签里的值和文本框中的值会同步发生变化，同样在文本框中输入值vue.message的值p标签里的值也会发生变化，这就是所谓的双向绑定。这儿有个地方需要注意：如果使用jquery或者原生方法直接修改dom的value，vue里的值并不会同步发生变化，会导致双向绑定出现问题

2 文本框、多行文本框

就是最基础的用法。。。。。简单到不知道该怎么介绍

在文本区域插值( <textarea>{{multilneMessage}}</textarea> ) 并不会生效，应用 v-model 来代替

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

    <span>Multiline message is:</span>
    <p style="white-space: pre">{{ multilneMessage }}</p>
    <br>
    <textarea v-model="multilneMessage" placeholder="add multiple lines"></textarea>
</div>
vue = new Vue({
  el: '#app',
  data: {
    message: "我是输入框",
    multilneMessage:"我是多行文本"
  }
})

3 复选框

3.1 单个复选框

3.1.1 绑定boolean类型

选中为true 不选中为false

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

3.1.2 绑定String类型

选中为selected 不选中为unSelected

<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked" 
            true-value="selected" false-value="unSelected" >
    <label for="checkbox">{{ checked }}</label>
</div>

3.1.3 绑定vue属性

选中为selected 不选中为unSelected,和绑定String类型基本相同 只不过用了v-bind来绑定vue里的属性

<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked" 
    v-bind:true-value="treuValue" v-bind:false-value="falseValue" >
    <label for="checkbox">{{ checked }}</label>
</div>

<script>
    vue = new Vue({
      el: '#app',
      data: {
        checked : "selected",
        trueValue:"selected",
        falseValue:"unSelected"
      }
    })
</script>

3.2 多个复选框

多个复选框可以绑定一个类型为数组的属性，
绑定boolean和字符串会有问题，字符串点击之后默认将值修改为boolean，并不会处理成数组，导致点击之后要么全部选中 要么全部不选中
多个复选框必须填写value值，不填写value值会导致处理成boolean类型，导致点击之后要么全部选中 要么全部不选中

<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>
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

4 单选按钮

4.1 标准用法

<div id="app">
  <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>
new Vue({
  el: '#app',
  data: {
    picked: ''
  }
})

4.2 绑定vue属性

使用v-for指令循环names生成一组单选按钮，当选中时，其对应的数组元素会赋值给pick属性，,和标准用法基本相同 只不过用了v-bind来绑定vue里的属性

<div id="app">
    <input type="radio" v-for="item in names" v-model="pick" v-bind:value="item">
    <span>radio value: {{ pick }}</span>
</div>

<script>
    vue = new Vue({
      el: '#app',
      data: {
        pick: "suman",
        names:["suman","sumomo","liuxiao"]
      }
    })
</script>

5 选择列表

5.1 单选列表

单选列表会把至赋值给绑定的属性

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
      el: '...',
      data: {
        selected: ''
      }
    })
</script>

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

5.2 多选列表

多选列表会将选中的值赋值给一个数组

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
      el: '#example-6',
      data: {
        selected: []
      }
    })
</script>