v-model表单输入绑定

可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
      <tr><td>用 户 名</td><td><input type="text" v-model="username" @blur="checkusername"> </td></tr>
      <tr><td>密码</td><td><input type="password" v-model="password1"> </td></tr>
      <tr><td>确认密码</td><td><input type="password" v-model="password2"></td></tr>
      <tr><td>性别</td>
        <td>
          男<input type="radio" name="sex"  value="boy" v-model="sex"> 
          女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
        </tr>
      <tr><td>爱好</td>
        <td>
          足球 <input type="checkbox" name="like" value="足球" v-model="like"> 
          篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
          兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like"> 
        </td>
      </tr>
      <tr><td>所在城市</td>
        <td>
          <select name="city" v-model="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
          </select> 
        </td>
      </tr>
      <tr><td>个人简介</td><td><textarea name="desc" v-model="desc"></textarea> </td></tr>
    </table>
    <button @click="register">注册</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
      username:'',
      password1:'',
      password2:'',
      sex:'',
      like:[],
      city:'',
      desc:''

  },
  methods:{
    register:function(){

        alert(this.username+this.password1+this.password2+this.sex+this.like+this.city+this.desc)
    },
    checkusername:function(){
      alert(this.username)
    }
  }
})
</script>
</html>

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值

效果

通俗的来讲就是，如果你用v-model来绑定一个vue中的数据，在你向这个表单输入数据鼠标点击了输入框之外时，会将你输入的值传递给vue中

posted @ 2021-04-23 11:28 EF果果阅读(148) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）

ef果果

v-model表单输入绑定

随笔分类

文章分类