vue2.0 之表单控件绑定

表单控件绑定v-model

1、文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div>
    <input type="text" name="" v-model="myVal"><br/>
    {{ myVal }}<br/>
    <input type="text" name="" v-model.lazy="myVal1"><br/>
    {{ myVal1 }}<br/>
    <input type="text" name="" v-model.number="myVal2"><br/>
    {{ typeof myVal2 }}<br/>
    <input type="text" name="" v-model.trim="myVal3"><br/>
    {{ myVal3 }}<br/>
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        myVal: '',
        myVal1: '',
        myVal2: '',
        myVal3: ''
      }
    }
  }
</script>
 
<style>
  html {
    height: 100%;
  }
</style>

v-model指令在表单控件元素上创建双向数据绑定。

  • lazy:延迟显示
  • number:转化为数字类型
  • trim:去除左右空字符

 

2、复选框、单选按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <div>
    {{ myVal }} <br/>
    <input type="checkbox" name="" value="apple" v-model="myVal"/>
    <label>apple</label>
    <input type="checkbox" name="" value="banana" v-model="myVal"/>
    <label>banana</label>
    <input type="checkbox" name="" value="orange" v-model="myVal"/>
    <label>orange</label>
    <br/> {{ myVal1 }} <br/>
    <input type="radio" name="" value="apple" v-model="myVal1"/>
    <label>apple</label>
    <input type="radio" name="" value="banana" v-model="myVal1"/>
    <label>banana</label>
    <input type="radio" name="" value="orange" v-model="myVal1"/>
    <label>orange</label>
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        myVal: [],
        myVal1: ''
      }
    }
  }
</script>
 
<style>
  html {
    height: 100%;
  }
</style>

 

3、选择列表

案例一:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div>
    {{ myVal }} <br/>
    <select v-model="myVal">
      <option value="0">apple</option>
      <option value="1">banana</option>
      <option value="2">orange</option>
    </select>
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        myVal: ''
      }
    }
  }
</script>
 
<style>
  html {
    height: 100%;
  }
</style>

案例二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
  <div>
    {{ myVal }} <br/>
    <select v-model="myVal">
      <option v-for="item in options" :value="item.val">{{ item.name }}</option>
    </select>
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        myVal: '',
        options: [
          {
            name: 'apple',
            val: 0
          },
          {
            name: 'banana',
            val: 1
          },
          {
            name: 'orange',
            val: 2
          }
        ]
      }
    }
  }
</script>
 
<style>
  html {
    height: 100%;
  }
</style>

 

posted @   shhnwangjian  阅读(216)  评论(0编辑  收藏  举报
编辑推荐:
· 聊一聊坑人的 C# MySql.Data SDK
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
阅读排行:
· 好消息,在 Visual Studio 中可以免费使用 GitHub Copilot 了!
· 聊一聊坑人的 C# MySql.Data SDK
· 没事别想不开去创业!
· Winform 使用WebView2 开发现代应用
· Java 项目愚蠢的分层及解决办法
点击右上角即可分享
微信分享提示