Vue的表单输入的双向绑定

1 输入框

Vue 有v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app">
        <input type="text" v-model="name">//输入框内修改的话
        {{ name }}                        //此处文本也会被修改
</div>
    <script>
        vm = new Vue({
            el: "#app",
            data: {
                name: "snashao",

            },
        })
    </script>

2.复选框

单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框，绑定到同一个数组：
<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: []
  }
})

 

 3 单选按钮使用

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

 

 

4 选择框

<div id="app">
      <!-- 下拉框 -->
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
 </div>
 <script>
        vm = new Vue({
            el: "#app",
            data: {
                selected: '',
            }
        })
    </script>