Forms
文章目录

VueJS: Forms

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<form id="demo">
  <!-- text -->
  <p>
    <h5>Inputs</h5>
    <!-- v-modal 绑定 text 元素的 value 属性 -->
    <input type="text" v-model="msg">
    <!-- msg = 空字符串的时候会显示 placeholder, data 里面一定要设置这个 msg -->
    <textarea v-model="msg" placeholder="add multiple lines"></textarea>
    {{msg}} 
  </p>
  <hr>
  <!-- checkbox -->
  <p>
    <h5>Checkbox</h5>
    <!-- v-modal 绑定 text 元素的 value 属性 -->
    <input type="checkbox" v-model="checked">
    <br>
    你选择的选项是: {{checked ? "yes" : "no"}}
  </p>
  <hr>
  <!-- radio buttons -->
  <p>
    <h5>单选框</h5>
    <!-- 注意这两个 v-modal 都绑定到了相同的 data -->
    <input type="radio" name="picked" value="one" v-model="picked">
    <input type="radio" name="picked" value="two" v-model="picked">
    <br>
    你选择的选项是: {{picked}}
  </p>
  <hr>
  <!-- select -->
  <p>
    <!-- 这里直接绑定到 select 元素之上 -->
    <select v-model="selected">
      <option>one</option>
      <option>two</option>
    </select>
    <br>
    你选择的选项是:{{selected}}
  </p>
  <hr>
  <!-- multiple select -->
  <p>
    <!-- 同样绑定到 select 元素之上 -->
    <select v-model="multiSelect" multiple>
      <option>one</option>
      <option>two</option>
      <option>three</option>
    </select>
    <!-- 如果选项为空那么返回一个 空数组 -->
    <br>
    你选择的选项是:{{multiSelect}}
  </p>
  <hr>
  <p>
    <pre>data: {{$data | json 2}}</pre>
  </p>
  <hr>
</form>


<script>
  var a = new Vue({
    el: '#demo', // 直接绑定一个 form 
    data: {
    msg: '',
    checked: true,
    picked: 'one',
    selected: 'two',
      multiSelect: ['one', 'three']
    }
  });
</script>