上面所说的UI控件一般指的是表单控件。
input：text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <script crossorigin="anonymous" integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw==" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <title>Document</title> </head> <body> <!-- view --> <div id="app"> 输入框:<input type="text" v-model="message"> {{message}} </div> <!-- viewmodel --> <script> var vm = new Vue({ el:"#app", data:{ message:"" } }); </script> </body> </html>
input：radio
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <script crossorigin="anonymous" integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw==" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <title>Document</title> </head> <body> <!-- view --> <div id="app"> 性别选择: <input type="radio" value="男" name="sex" v-model="huya">男 <input type="radio" value="女" name="sex" v-model="huya">女 {{huya}} </div> <!-- viewmodel --> <script> var vm = new Vue({ el:"#app", data:{ huya: '' } }); </script> </body> </html>
select：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <script crossorigin="anonymous" integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw==" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <title>Document</title> </head> <body> <!-- view --> <div id="app"> <select name="" id="" v-model="message"> <option value="guangdong">广东</option> <option value="fujian">福建</option> <option value="hunan">湖南</option> </select> {{message}} </div> <!-- viewmodel --> <script> var vm = new Vue({ el:"#app", data:{ message:"" } }); </script> </body> </html>