vue绑定表单数据及指令

如果要将数据和页面元素进行双向绑定，使用v-model指令。这个指令主要用于处理表单输入中。下面是一组表单例子。

<h1>绑定表单</h1>

<div id="s7">

  <p>文本框：{{text}}</p>

  <p>多行文本：{{textArea}}</p>

  <p>单选按钮：{{radio}}</p>

  <p>复选框：{{checkbox}}</p>

  <p>多选框：{{select}}</p>

  <hr>

  <p>文本框：<input type="text" v-model="text"></p>

  <p>多行文本：<textarea v-model="textArea"></textarea></p>

  <p>单选按钮：<input type="radio" v-model="radio" value="1" id="one"><label for="one">1</label>

    <input type="radio" value="2" v-model="radio" id="two"><label for="two">2</label>

  </p>

  <p>复选框：<input type="checkbox" v-model="checkbox" id="checkbox"><label for="checkbox">复选框</label></p>

  <p>多选框：<select id="select" v-model="select">

    <option value="1">1</option>

    <option value="2">2</option>

    <option value="3">3</option>

    <option value="4">4</option>

  </select>

  </p>

</div>

<script>

  let vm7 = new Vue({

    el: '#s7',

    data: {

      text: 'text',

      textArea: 'textArea',

      radio: '',

      checkbox: '',

      select: '',

    }

  })

</script>

千语创想-专业APP开发、app定制服务商，提供一站式移动应用解决方案，满足您的各类需求，欢迎免费评估需求和获取报价。

立即免费在线制作一个APP，新手注册即送开发大礼包

提交app定制需求，免费获取报价和周期：

电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500

手机请点击https://www.qianyuthink.com/?url=/m/customizedservice