Vue.JS入门篇--处理表单

最新推荐文章于 2024-06-05 09:30:55 发布

Ailsa-show

最新推荐文章于 2024-06-05 09:30:55 发布

阅读量696

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/lamenw/article/details/79650217

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

   <!DOCTYPE html> 
 

   < 
  html> 
 


   < 
  head 
  lang=" 
  en"> 
 

   < 
  meta 
  charset=" 
  UTF-8"> 
 

   < 
  title></ 
  title> 
 

   < 
  script 
  src=" 
  http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></ 
  script> </ 
  head> 
 


   < 
  body> 
 

   < 
  form 
  id=" 
  demo"> 
 
 
  <!-- text --> 
 

   < 
  p> 
 

   < 
  input 
  type=" 
  text" 
  v-model=" 
  msg"> {{msg}} </ 
  p> 
 
 
  <!-- checkbox --> 
 

   < 
  p> 
 

   < 
  input 
  type=" 
  checkbox" 
  v-model=" 
  checked"> {{checked ? "yes" : "no"}} </ 
  p> 
 
 
  <!-- radio buttons --> 
 

   < 
  p> 
 

   < 
  input 
  type=" 
  radio" 
  name=" 
  picked" 
  value=" 
  one" 
  v-model=" 
  picked"> 
 

   < 
  input 
  type=" 
  radio" 
  name=" 
  picked" 
  value=" 
  two" 
  v-model=" 
  picked"> {{picked}} </ 
  p> 
 
 
  <!-- select --> 
 

   < 
  p> 
 

   < 
  select 
  v-model=" 
  selected"> 
 

   < 
  option>one</ 
  option> 
 

   < 
  option>two</ 
  option> 
 

   </ 
  select> {{selected}} </ 
  p> 
 
 
  <!-- multiple select --> 
 

   < 
  p> 
 

   < 
  select 
  v-model=" 
  multiSelect" 
  multiple> 
 

   < 
  option>one</ 
  option> 
 

   < 
  option>two</ 
  option> 
 

   < 
  option>three</ 
  option> 
 

   </ 
  select> {{multiSelect}} </ 
  p> 
 

   < 
  p> 
 

   < 
  pre>data: {{$data | json 2}}</ 
  pre> 
 

   </ 
  p> 
 

   </ 
  form> 
 

   < 
  script> new 
  Vue({ el: ' 
  #demo', data: { msg: ' 
  hi!', checked: 
  true, picked: ' 
  one', selected: ' 
  two', multiSelect: [' 
  one', ' 
  three'] } }); </ 
  script> </ 
  body> 
 


   </ 
  html> 
 
 
  
 
 

Ailsa-show

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.JS入门篇--处理表单

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/vue
复制链接

扫一扫