WEB前端
  1. Vue
    1. WEB前端 - Vue - 安装
    2. WEB前端 - Vue - webpack目录结构与第一个项目示例
    3. WEB前端 - Vue - 基础语法
    4. WEB前端 - Vue - 条件语句与循环语句
    5. WEB前端 - Vue - 函数与计算属性
    6. WEB前端 - Vue - 监听属性
    7. WEB前端 - Vue - 样式绑定
    8. WEB前端 - Vue - 表单
    9. WEB前端 - Vue - 组件详解
    10. WEB前端 - Vue - 路由
    11. WEB前端 - Vue - 生命周期钩子函数

WEB前端 - Vue - 表单

程序员日记      2019-09-16

我们现在来介绍一下Vue中表单的简单应用。

首先我们知道可以用 v-model 指令在表单控件元素上创建双向数据绑定。

示例.各种表单的简单使用

<template>
  <div id="app">
    <div>
      <p>单行文本:</p>
      <br />
      <input type="text" v-model="textdemo" placeholder="单行文本">
    </div>
    <div>
      多行文本:
      <br />
      <textarea v-model="textareademo" placeholder="多行文本输入……"></textarea> 
    </div>
    <div>
      <p>单个复选框</p>
      <br />
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{ checked }}</label>
    </div>
    <div>
      <p>多个复选框:</p>
      <input type="checkbox" id="baidu" value="Baidu" v-model="checkeds">
      <label for="baidu">Baidu</label>
      <input type="checkbox" id="google" value="Google" v-model="checkeds">
      <label for="google">Google</label>
      <input type="checkbox" id="taobao" value="Taobao" v-model="checkeds">
      <label for="taobao">taobao</label>
      <br>
      <span>选择的值为: {{ checkeds }}</span>
    </div>
    <div>
      <p>单选框</p>
      <input type="radio" id="baidu_1" value="baidu" v-model="picked">
      <label for="baidu_1">baidu</label>
      <br>
      <input type="radio" id="google_1" value="Google" v-model="picked">
      <label for="google_1">Google</label>
      <br>
      <span>选中值为: {{ picked }}</span>
    </div>
    <div>
      <p>下拉选择框</p>
      <select v-model="selected" name="xiala">
        <option value="">请选择</option>
        <option value="aaa">aaa</option>
        <option value="bbb">bbb</option>
      </select>
      <p>选择的值是: {{selected}}</p>
    </div>
    <div>
      <p>.lazy修饰符,双向绑定在change事件触发再同步</p>
      <input type="text" v-model.lazy="textdemo" placeholder="单行文本">
    </div>
    <div>
      <p>.trim修饰符,自动将过滤文本框前后空格</p>
      <input type="text" v-model.trim="textdemo" placeholder="单行文本">
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data: function(){
    return {
      textdemo:'单行文本',
      textareademo:'多行文本\n多行文本',
      checked:true,
      picked:'baidu',
      checkeds:[],
      selected:'',
    };
  }
};
</script>