Vue.js表单控件实践

257 阅读 0 评论 170 点赞

我是靠谱客的博主诚心吐司，这篇文章主要介绍Vue.js表单控件实践，现在分享给大家，希望可以做个参考。

最近项目中使用了vue替代繁琐的jquery处理dom的数据更新，个人非常喜欢，所以就上官网小小地实践了一把。

以下为表单控件的实践，代码敬上，直接新建html文件，粘贴复制即可看到效果

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>PlayAround2 Have Fun</title>
 <script src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
 <style>
  h2{
   text-decoration:underline;
  }
  .red{
   color: red;
  }
  .green{
   color: green;
  }
 </style>
</head>
<body>
 <div id="app">

<h2>checkBox</h2>
  <input type="checkbox" v-model="checked">
  <label>{{checked}}</label>

<h2>multi checkbox</h2>
  <input type="checkbox" id="Kobe" value="Kobe" v-model="names">
  <label for="Kobe">Kobe</label>
  <input type="checkbox" id="Curry" value="Curry" v-model="names">
  <label for="Curry">Curry</label>
  <input type="checkbox" id="Aaron" value="Aaron" v-model="names">
  <label for="Aaron">Aaron</label>
  <br>
  <span>Checked names: {{names | json}}</span>

<h2>Radio</h2>
  <input type="radio" id="one" value="one" v-model="picked">
  <label for="one">one</label>
  <br>
  <input type="radio" id="two" value="two" v-model="picked">
  <label for="two">two</label>
  <br>
  <span>Picked: {{picked}}</span>

<h2>Select</h2>
  <select v-model="selected">
   <option selected>Kobe</option>
   <option>Curry</option>
   <option>Aaron</option>
  </select>
  <span>Selected: {{selected}}</span>

<h2>Multi Select</h2>
  <select multiple v-model="multiSelected">
   <option>Kobe</option>
   <option>Curry</option>
   <option>Aaron</option>
  </select>
  <span>Selected: {{multiSelected}}</span>

<h2>Select with for</h2>
  <select v-model="selectedPlayer">
   <option v-for="option in options" :value="option.value">{{option.text}}</option>
  </select>
  <span>Selected: {{selectedPlayer}}</span>

<h2>Lazy-改变更新的事件从input->change</h2>
  <input v-model="msg" lazy>
  <span>Msg:{{msg}}</span>

<h2>Number(没啥吊用。。。.2->0.2,仅此而已吗?)</h2>
  <input v-model="age" number>
  <span>age:{{age}}</span>

<h2>debounce-延迟更新view</h2>
  <p>Edit me<input v-model="delayMsg" debounce="500"></p>
  <span>delayMsg:{{delayMsg}}</span>

</div>

}
  })
 </script>
</body>
</html>

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>PlayAround2 Have Fun</title>
 <script src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
 <style>
  h2{
   text-decoration:underline;
  }
  .red{
   color: red;
  }
  .green{
   color: green;
  }
 </style>
</head>
<body>
 <div id="app">

  <h2>checkBox</h2>
  <input type="checkbox" v-model="checked">
  <label>{{checked}}</label>

  <h2>multi checkbox</h2>
  <input type="checkbox" id="Kobe" value="Kobe" v-model="names">
  <label for="Kobe">Kobe</label>
  <input type="checkbox" id="Curry" value="Curry" v-model="names">
  <label for="Curry">Curry</label>
  <input type="checkbox" id="Aaron" value="Aaron" v-model="names">
  <label for="Aaron">Aaron</label>
  <br>
  <span>Checked names: {{names | json}}</span>

  <h2>Radio</h2>
  <input type="radio" id="one" value="one" v-model="picked">
  <label for="one">one</label>
  <br>
  <input type="radio" id="two" value="two" v-model="picked">
  <label for="two">two</label>
  <br>
  <span>Picked: {{picked}}</span>

  <h2>Select</h2>
  <select v-model="selected">
   <option selected>Kobe</option>
   <option>Curry</option>
   <option>Aaron</option>
  </select>
  <span>Selected: {{selected}}</span>

  <h2>Multi Select</h2>
  <select multiple v-model="multiSelected">
   <option>Kobe</option>
   <option>Curry</option>
   <option>Aaron</option>
  </select>
  <span>Selected: {{multiSelected}}</span>


  <h2>Select with for</h2>
  <select v-model="selectedPlayer">
   <option v-for="option in options" :value="option.value">{{option.text}}</option>
  </select>
  <span>Selected: {{selectedPlayer}}</span>

  <h2>Lazy-改变更新的事件从input->change</h2>
  <input v-model="msg" lazy>
  <span>Msg:{{msg}}</span>

  <h2>Number(没啥吊用。。。.2->0.2,仅此而已吗?)</h2>
  <input v-model="age" number>
  <span>age:{{age}}</span>

  <h2>debounce-延迟更新view</h2>
  <p>Edit me<input v-model="delayMsg" debounce="500"></p>
  <span>delayMsg:{{delayMsg}}</span>

 </div>

 <script>
  var vm = new Vue({
   el:"#app",
   data:{
    checked:false,
    names:[],
    picked:"",
    selected:"",
    multiSelected:"",
    options:[
     {text:"Kobe",value:"Bryant"},
     {text:"Stephen",value:"Curry"},
     {text:"Aaron",value:"Kong"}
    ],
    selectedPlayer:"",
    msg:"",
    age:"",
    delayMsg:""
   },
   methods:{

   }
  })
 </script>
</body>
</html>