Vue.js - 表单操控

最新推荐文章于 2024-04-11 11:38:54 发布

weixin_43331769

最新推荐文章于 2024-04-11 11:38:54 发布

阅读量90

点赞数 1

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_43331769/article/details/104068847

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Vue.js - 表单

一、默认选项
二、表单域修饰符

一、默认选项

radio 的单选操控
默认选项采用 value的值来确定，用v-model双向数据绑定来实现
checkbox多选的默认选项
默认选项采用 value的值来确定，需要在后面加 multiple，用v-model双向数据绑定来实现，不同的是在data数据域中，用数组选定value的值
select
textarea

    <script type="text/javascript">
      window.onload = function () {
        const vm = new Vue({
          el:'#app',
          data:{
            uname:'lisi',
            gender: 2,     选定2，则代表默认选项是女，选则1则默认男
            hobby:['1','2'],
            desc:'窗前明月光',
            occuption:['2','3']
          },
          methods:{

          }
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <form action="#">
        <div>
          <span>姓名：</span>
          <span>
            <input type="text" v-model="uname">
          </span>
        </div>
        <div>
          <span>性别：</span>
          <span>
            <input type="radio" id="male" value="1" v-model="gender">
            <label for="male">男</label>
            <input type="radio" id="female" value="2" v-model="gender">
            <label for="female">女</label>
          </span>
        </div>
        <div>
          <span>爱好：</span>
          <span>
            <input type="checkbox" id="ball" value="1" v-model="hobby">
            <label for="ball">篮球</label>
            <input type="checkbox" id="sing" value="2" v-model="hobby">
            <label for="ball">唱歌</label>
            <input type="checkbox" id="code" value="3" v-model="hobby">
            <label for="code">写代码</label>
          </span>
        </div>
        <div>
          <span>职业：</span>
          <select v-model="occuption" multiple>  multiple表示多选，默认选项是data数据域中occuption所选的代表下面职业的value值
            <option value="1">请选择职业:</option>
            <option value="2">教师</option>
            <option value="3">软件工程师</option>
            <option value="4">律师</option>
          </select>
        </div>
        <div>
          <span>个人简介</span>
          <textarea v-model="desc"></textarea> 表示默认显示data数据域中desc表示的文字
        </div>
      </form>
    </div>
</body>

结果：
在这里插入图片描述

二、表单域修饰符

1：number

添加一个修饰符 number 给 v-model 来处理输入值：

 <script type="text/javascript">
      window.onload = function () {
        const vm = new Vue({
          el:'#app',
          data:{
            message:" "
          },
          methods:{
            handel(){
              alert(this.message + 10);
            }
          }
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <form>
        <input type="text " v-model.number="message"> 将输入的字符串变为数值相加
        <input type="submit" value="添加" @click="handel">
      </form>
    </div>
</body>

2：trim

要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

   <script type="text/javascript">
      window.onload = function () {
        const vm = new Vue({
          el:'#app',
          data:{
            message:""
          },
          methods:{
            handel(){
              alert(this.message.length);
            }
          }
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <form>
        <input type="text " v-model.trim="message">  trim后在输入框中输入空格后，空格被忽视
        <input type="submit" value="添加" @click="handel">  
      </form>
    </div>
</body>

3：lazy

在 “change” 而不是 “input” 事件中更新，在失去焦点的瞬间，实现同步
1：change 事件是指失去焦点的瞬间改变
2：input事件是指value值变化的瞬间改变

    <script type="text/javascript">
      window.onload = function () {
        const vm = new Vue({
          el:'#app',
          data:{
            message:""
          },
          methods:{
            handel(){
              alert(this.message.length);
            }
          }
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <form>
        <input type="text " v-model.lazy="message">
        {{message}}
      </form>
    </div>
</body>

结果：
在这里插入图片描述失去焦点后：

weixin_43331769

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js - 表单操控

Vue.js - 表单一、默认选项二、表单域修饰符1：number2：trim3：lazy一、默认选项radio 的单选操控默认选项采用 value的值来确定，用v-model双向数据绑定来实现checkbox多选的默认选项默认选项采用 value的值来确定，需要在后面加 multiple，用v-model双向数据绑定来实现，不同的是在data数据域中，用数组选定value的值sel...
复制链接

扫一扫

专栏目录