表单输入绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      用户名：<input type="text" v-model="username" @keyup="valiusername" placeholder="用户名">{{ usernametip }}
    </div>
    <div>
      密码：<input type="password" v-model="password" placeholder="密码">
    </div>
    <div>
      性别：
      <input type="radio" name="sex" v-model="sex" value="1">男
      <input type="radio" name="sex" v-model="sex" value="0">女
    </div>
    <div>
      爱好：
      <input type="checkbox" name="hobby" v-model="hobby" value="1">唱
      <input type="checkbox" name="hobby" v-model="hobby" value="2">跳
      <input type="checkbox" name="hobby" v-model="hobby" value="3">rap
      <input type="checkbox" name="hobby" v-model="hobby" value="4">篮球
    </div>
    <div>
      <select v-model="lesson">
        <option value="" disabled>请选择</option>
        <option value="1">一阶段</option>
        <option value="2">二阶段</option>
        <option value="3">三阶段</option>
      </select>
    </div>
    <div>
      备注：
      <textarea v-model="note" placeholder="请填写您的特殊需求"></textarea>
    </div>
    <div>
      <input type="checkbox" v-model="flag">已阅读***协议
    </div>
    <button @click="getData">获取用户的信息</button>
    {{ tip }}
  </div>
</body>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      password: '',
      sex: '1',
      hobby: ['2'], // checkbox 作为多选，类型为数组
      lesson: '',
      note: '',
      flag: false, // checkbox 作为选中还是未选中，类型为boolean
      tip: '',
      usernametip: ''
    },
    methods: {
      valiusername () {
        if (this.username === '') {
          this.usernametip = '用户名不能为空'
        } else if (this.username.length < 5) {
          this.usernametip = '请输入正确格式的用户名'
        } else {
          this.usernametip = 'ok'
        }
      },
      getData () {
        if (this.flag) {
          console.log({
            username: this.username, // username: username 如果key和value相同，可以使用简写形式 username
            password: this.password,
            sex: this.sex,
            hobby: this.hobby,
            lesson: this.lesson,
            note: this.note,
            flag: this.flag
          })
        } else {
          this.tip = "请先勾选同意阅读***协议" // 修改初始化数据
        }
      }
    }
  })

</script>
</html>

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      用户名：<input type="text" v-model="username" placeholder="用户名">{{ usernametip }}
    </div>
    <div>
      密码：<input type="password" v-model="password" placeholder="密码">{{passwordtip}}
    </div>
    <div>
      性别：
      <input type="radio" name="sex" v-model="sex" value="1">男
      <input type="radio" name="sex" v-model="sex" value="0">女
    </div>
    <div>
      爱好：
      <input type="checkbox" name="hobby" v-model="hobby" value="1">唱
      <input type="checkbox" name="hobby" v-model="hobby" value="2">跳
      <input type="checkbox" name="hobby" v-model="hobby" value="3">rap
      <input type="checkbox" name="hobby" v-model="hobby" value="4">篮球
    </div>
    <div>
      <select v-model="lesson">
        <option value="" disabled>请选择</option>
        <option value="1">一阶段</option>
        <option value="2">二阶段</option>
        <option value="3">三阶段</option>
      </select>
    </div>
    <div>
      备注：
      <textarea v-model="note" placeholder="请填写您的特殊需求"></textarea>
    </div>
    <div>
      <input type="checkbox" v-model="flag">已阅读***协议
    </div>
    <button @click="getData">获取用户的信息</button>
    {{ tip }}
  </div>
</body>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      password: '',
      sex: '1',
      hobby: ['2'], // checkbox 作为多选，类型为数组
      lesson: '',
      note: '',
      flag: false, // checkbox 作为选中还是未选中，类型为boolean
      tip: ''
    },
    computed: {
      usernametip () {
        if (this.username === '') {
          return '不能为空'
        } else if (this.username.length < 5) {
          return '格式不对'
        } else {
          return 'ok'
        }
      },
      passwordtip () {
        if (this.password === '') {
          return '不能为空'
        } else if (this.password.length < 5) {
          return '格式不对'
        } else {
          return 'ok'
        }
      }
    },
    methods: {
      getData () {
        if (this.flag) {
          console.log({
            username: this.username, // username: username 如果key和value相同，可以使用简写形式 username
            password: this.password,
            sex: this.sex,
            hobby: this.hobby,
            lesson: this.lesson,
            note: this.note,
            flag: this.flag
          })
        } else {
          this.tip = "请先勾选同意阅读***协议" // 修改初始化数据
        }
      }
    }
  })

</script>
</html>

侦听属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      用户名：<input type="text" v-model="username" placeholder="用户名">{{ usernametip }}
    </div>
    <div>
      密码：<input type="password" v-model="password" placeholder="密码">
    </div>
    <div>
      性别：
      <input type="radio" name="sex" v-model="sex" value="1">男
      <input type="radio" name="sex" v-model="sex" value="0">女
    </div>
    <div>
      爱好：
      <input type="checkbox" name="hobby" v-model="hobby" value="1">唱
      <input type="checkbox" name="hobby" v-model="hobby" value="2">跳
      <input type="checkbox" name="hobby" v-model="hobby" value="3">rap
      <input type="checkbox" name="hobby" v-model="hobby" value="4">篮球
    </div>
    <div>
      <select v-model="lesson">
        <option value="" disabled>请选择</option>
        <option value="1">一阶段</option>
        <option value="2">二阶段</option>
        <option value="3">三阶段</option>
      </select>
    </div>
    <div>
      备注：
      <textarea v-model="note" placeholder="请填写您的特殊需求"></textarea>
    </div>
    <div>
      <input type="checkbox" v-model="flag">已阅读***协议
    </div>
    <button @click="getData">获取用户的信息</button>
    {{ tip }}
  </div>
</body>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      password: '',
      sex: '1',
      hobby: ['2'], // checkbox 作为多选，类型为数组
      lesson: '',
      note: '',
      flag: false, // checkbox 作为选中还是未选中，类型为boolean
      tip: '',
      usernametip: ''
    },
    watch: {
      username (newVal, oldVal) {
        if (newVal === '') {
          // 用户名不能为空
          this.usernametip = '用户名不能为空'
        } else if (newVal.length < 5) {
          // 用户名格式不对
          this.usernametip = '用户名格式不对'
        } else {
          // ok
          this.usernametip = 'ok'
        }
      }
    },
  
      getData () {
        if (this.flag) {
          console.log({
            username: this.username, // username: username 如果key和value相同，可以使用简写形式 username
            password: this.password,
            sex: this.sex,
            hobby: this.hobby,
            lesson: this.lesson,
            note: this.note,
            flag: this.flag
          })
        } else {
          this.tip = "请先勾选同意阅读***协议" // 修改初始化数据
        }
      }
    }
  })

</script>
</html>

原文地址：https://www.cnblogs.com/hy96/p/11729424.html

vue-表单

表单输入绑定

计算属性

侦听属性