第5章 Vue 表单

5-1双向数据绑定 v-model

<div id="root">
        <p>
            <label for="">请输入姓名</label>
            <input type="text" v-model="name" placeholder="请输入名字">
        </p>
        <p>
            你的名字是:{{name}}
        </p>
    </div>
    <script>
        var app = new Vue({
            el: '#root',
            data() {
                return {
                    name: ''
                }
            },
        })
    </script>

5-2复选框(checkbox)相关的操作

1）、单个复选框的取反操作
2）、多个复选框的数组操作

<div id="root">
    <p>单个复选框:</p>
    <p>
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{checked}}</label>
    </p>
    <p>多个复选框:</p>
    <p>
      <input type="checkbox" id="chinese" value="chinese" v-model="checkedNames">
      <label for="chinese">chinese</label>
      <input type="checkbox" id="Math" value="Math" v-model="checkedNames">
      <label for="Math">Math</label>
      <input type="checkbox" id="English" value="English" v-model="checkedNames">
      <label for="English">English</label>
    </p>
    <p>选择的值为:{{checkedNames}}</p>
  </div>
  <script>
    var app = new Vue({
      el: '#root',
      data: {
        checked: false,
        checkedNames: []
      }
    })
  </script>

效果

5-3单选框(radio)相关的操作

<div id="root">
    <p>单个复选框:</p>
    <p>
      <input type="radio" id="man" value="man" v-model="picked">
      <label for="man">man</label>
      <input type="radio" id="female" value="female" v-model="picked">
      <label for="female">female</label>
    </p>
    <p>
      选中的值：{{picked}}
    </p>
  </div>
  <script>
    var app = new Vue({
      el: '#root',
      data: {
        picked: 'man',
      }
    })
  </script>

效果

5-4选择框(select)相关的操作

<div id="root">
    <p>选择框:</p>
    <select name="age" id="age" v-model="ages">
      <option value="0-12">儿童</option>
      <option value="12-18">少年</option>
      <option value="18-30">青年</option>
      <option value="30-40">中年</option>
      <option value="40-50">壮年</option>
      <option value="50-">老年</option>
    </select>
    <p>你先则的值是:{{ages}}</p>
  </div>
  <script>
    var app = new Vue({
      el: '#root',
      data: {
        ages: '0-12',
      }
    })
  </script>

效果

5-5 表单中一些修饰符的操作（.lazy、.number、.trim）

<div id="root">
    <p>.lazy(input事件同步输入看的值，通过lazy转为change事件中同步):</p>
    <input type="text" v-model.lazy="text">
    <p>你输入的文本内容是:{{text}}</p>
    <p>.number(输入文本内容为数字):</p>
    <input type="number" v-model.number="number">
    <p>输入的数字是:{{number}}</p>
    <p>.trim(去除输入框两端的空格):</p>
    <input type="text" v-model.trim="trimText">
    <p>显示输入的内容:{{trimText}}</p>
  </div>
  <script>
    var app = new Vue({
      el: '#root',
      data: {
        text: '',
        number: '',
        trimText: ''
      }
    })
  </script>

效果

更多

上一篇：第4章 深入理解Vue组件
下一篇：第6章 Vue 动画
全篇文章：Vue学习总结
所有章节目录：Vue学习目录