vue基础--表单浅记

来源：互联网发布：淘宝游戏账号交易编辑：程序博客网时间：2024/05/21 10:46

最近两天开始学习vue这个框架，虽然本人算是原生主义，比较喜欢纯js写东西，但优秀的框架总有许多值得学习的地方。技术发展的根本意义，在于让人们更轻松地解决难题，借鉴别人的思想很重要。表单说白了就是接收用户的输入，vue在表单中几乎都用了v-model语法糖实现表单和vue实例中数据 的双向绑定,单纯用的话，只需要记住两点：
1.v-model绑定的是vue实例中的数据，就像原生表单中每个表单元素都有name来标识一样，vue实例中要有一个对应的属性（变量）来接收/存储表单元素中的数据。对于多个checkbox（复选框）和多选的select，对应的vue属性是一个数组。
2.vue表单可以绑定动态属性，即vue实例中的属性或用户在v-bind：value=“js表达式”的自定义。

<body>
   <div id="app">
      <inputv-model.trim="message">{{message}}<br/>
      <textarea name="commend" v-model.trim="message_area"id="" cols="30"rows="10"></textarea>{{message_area}}
       单选框：
      <input type="checkbox" id="single_checkbox"v-model="checked1" ><labelfor="single_checkbox">{{checked1}}</label><br/>
       复选框：
      <input type="checkbox" id="c1" value="c1"v-model="mul_checkbox"><labelfor="c1">c1</label>
      <input type="checkbox" id="c2" value="c2"v-model="mul_checkbox"><labelfor="c2">c2</label>
      <input type="checkbox" id="c3" value="c3"v-model="mul_checkbox"><labelfor="c3">c3</label>
      <input type="checkbox" id="c4" value="c4"v-model="mul_checkbox"><labelfor="c4">c4</label>{{mul_checkbox}}<br/>
      单选按钮：<br/>
      <input type="radio" value="h1" id="r1"v-model="radioBtn" ><labelfor="r1"></label>
      <input type="radio" value="h2" id="r2"v-model="radioBtn" ><labelfor="r2"></label><br/>
       单选列表：
      <select name="selectOne"v-model="selectSin">
         <optionvalue="q1">q1</option>
         <optionvalue="q2">q2</option>
         <optionvalue="q3">q3</option>
         <optionvalue="q4">q4</option>
      </select><br/>
       多选：
      <select name="selectMul" multiplev-model="selectMul">
         <option>a1</option>
         <option>a2</option>
         <option>a3</option>
         <option>a4</option>
      </select><br/>
      动态选项：<br/>
      <select v-model="dyn_selected">
         <option v-for="option in options":value="option.value">{{option.text}}</option>
      </select>{{dyn_selected}}
      <p>以上表单的值都是写死的（在页面上的静态字符或布尔值）,可以动态绑定到vue实例的一个属性上，不而是页面的静态字符</p>
      复选框：(true-value/false-value)<br/>
      <input type="checkbox" v-model="dyn_checkbox":true-value="check_a":false-value="check_b">{{dyn_checkbox}}<br/>
      单选框：（v-bind:property）<br/>
      <input type="radio" v-model="dyn_radio":value="radio_a">{{dyn_radio}}<br/>
      selectLit:(option---:object)<br/>
      <select v-model="dyn_select">
         <option:value="{node:'a'}">a</option>
         <option:value="{node:'b'}">b</option>
         <option:value="{node:'c'}">c</option>
         <option:value="{node:'d'}">d</option>
         <option:value="{node:'e'}">e</option>
      </select>{{dyn_select}}<br/>
   </div>
</body>
<script>
    var app=newVue({
      el:'#app',
       data:{
         check_a:'wahaha',
         check_b:'wakaka',
         radio_a:'asdadw',
         message:'lalala',
         message_area:'hihihi',
         checked1:false,
         mul_checkbox:[],
         radioBtn:'',
         selectSin:'',
         selectMul:[],
         dyn_selected:'',
         options:[{text:'selectA',value:'selectA'},{text:'selectB',value:'selectB'},{text:'selectC',value:'selectC'}],
         dyn_checkbox:this.check_b,
         dyn_radio:null,
         dyn_select:null
       }
    })
</script>

------------------------------分割线和原始表单对比--------------------------------------------

<div id="app">
   <form action="">
   <fieldset>
   <legend>表单</legend>
   <labelfor="fn">FirstName:</label><br/><inputtype="text" name="fn" id="fn"><br/>
   <labelfor="ln">LastName:</label><br/><inputtype="text" name="ln" id="ln"><br/>
   你喜欢的出行方式：<br/>
   <input type="radio" name="goWay" id="go_car"value="car"> <labelfor="go_car">car</label>
   <input type="radio" name="goWay" id="go_bike"value="bike"> <labelfor="go_bike">bike</label>
   <input type="radio" name="goWay" id="go_train"value="train"> <labelfor="go_train">train</label>
   <input type="radio" name="goWay" id="go_plane"value="plane"> <labelfor="go_plane">plane</label><br/>
   你喜欢的女星：<br/>
   <input type="checkbox" name="girls" id="kat"value="Kat"> <labelfor="kat">Kat</label>
   <input type="checkbox" name="girls" id="sherry"value="Sherry"> <labelfor="sherry">Sherry</label>
   <input type="checkbox" name="girls" id="emily"value="Emily"> <labelfor="emily">Emily</label>
   <input type="checkbox" name="girls" id="nina"value="Nina"> <labelfor="nina">Nina</label><br/>
   你喜欢的电影类型：<br/>
   <select name="movies"id="movie_type">
      <optionvalue="funny">fun</option>
      <optionvalue="love">love</option>
      <optionvalue="cartoon">cartoon</option>
      <optionvalue="sad">sad</option>
   </select><br/>
   你的一些建议：<br/>
   <textarea name="commend" id="commend" cols="30"rows="10"></textarea>
   </fieldset>
   </form>
</div>

阅读全文

0 0