（11）打鸡儿教你Vue.js

「爱情、让人受尽委屈。」 2021-09-20 13:50 172阅读 0赞

表单

v-model 指令在表单控件元素上创建双向数据绑定

![image][]

<div id="app">
      <p>单个复选框：</p>
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{
       { checked }}</label>
        
      <p>多个复选框：</p>
      <input type="checkbox" id="da" value="da" v-model="checkedNames">
      <label for="da">da</label>
      <input type="checkbox" id="google" value="Google" v-model="checkedNames">
      <label for="google">Google</label>
      <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
      <label for="taobao">taobao</label>
      <br>
      <span>选择的值为: {
       { checkedNames }}</span>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        checked : false,
        checkedNames: []
      }
    })
    </script>

单选按钮：

<div id="app">
      <input type="radio" id="da" value="da" v-model="picked">
      <label for="da">da</label>
      <br>
      <input type="radio" id="google" value="Google" v-model="picked">
      <label for="google">Google</label>
      <br>
      <span>选中值为: {
       { picked }}</span>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        picked : 'da'
      }
    })
    </script>

<div id="app">
      <select v-model="selected" name="com">
        <option value="">选择一个网站</option>
        <option value="www.da.com">da</option>
        <option value="www.google.com">Google</option>
      </select>
     
      <div id="output">
          选择的网站是: {
       {selected}}
      </div>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        selected: '' 
      }
    })
    </script>

修饰符  
.lazy转变为在 change 事件中同步

.number

.trim

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[image]: /images/20210724/d3b209b4a1674f9bbb4985e515f2b30f.png
[1240]: /images/20210724/11e23b3a309f44c8b89f0abfa507d636.png
[1240 1]: /images/20210724/8e6787614a4b4898a59047ddb0340a69.png