表单
1 <section id="content"> 2 <h2>表单</h2> 3 <section> 4 <h3>复选框checkbox</h3> 5 <p>【单个】通过true和false的值</p> 6 <input type="checkbox" id="checkbox" v-model="checked"> 7 <label for="checkbox">{{ checked }}</label> 8 <p>【单个】通过value值来进行选中时，也要把选中的值当做数组来处理</p> 9 <input type="checkbox" id="checkbox1" value="test" v-model="checked1"> 10 <label for="checkbox">{{ checked1 }}</label> 11 <h4>【多个】</h4> 12 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> 13 <label for="jack">Jack</label> 14 <input type="checkbox" id="john" value="John" v-model="checkedNames"> 15 <label for="john">John</label> 16 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> 17 <label for="mike">Mike</label> 18 <br> 19 <span>Checked names: {{ checkedNames }}</span> 20 <h3>单选框radio</h3> 21 <p>【单个】通过value值默认选中</p> 22 <input type="radio" id="radio" value="男" v-model="checked0"> 23 <label for="radio">{{ checked0 }}</label> 24 <p>【多个】通过value值默认选中【男，女】</p> 25 <input type="radio" id="man" value="男" v-model="sex"> 26 <label for="man">男</label> 27 <input type="radio" id="woman" value="女" v-model="sex"> 28 <label for="woman">女</label> 29 <p>你选择的性别为：{{sex}}</p> 30 </section> 31 <section> 32 <h3>文本框框</h3> 33 <p>【单行】input</p> 34 <div> 35 <input type="text" v-model="userName"> 36 <label>姓名：{{userName}}</label> 37 </div> 38 <p>【多行文本】textarea:在文本区域插值 (<textarea></textarea>) 并不会生效，应用 v-model 来代替。</p> 39 <div> 40 <textarea v-model="address"></textarea> 41 <label>地址：{{address}}</label> 42 </div> 43 </section> 44 <section> 45 <h3>选择框</h3> 46 <select v-model="selected"> 47 <option disabled value="">请选择</option> 48 <option>A</option> 49 <option>B</option> 50 <option>C</option> 51 </select> 52 <span>选中的值: {{ selected }}</span> 53 </section> 54 <section> 55 <h3>修饰符</h3> 56 <h4>lazy:change时改变</h4> 57 <input type="text" v-model.lazy="tel"> 58 <p>电话号码：{{tel}}</p> 59 <h4>number:可以转换的就转换为number类型，不能转换的就返回原值</h4> 60 <input type="text" v-model.number="tel1"> 61 <p>电话号码：{{tel1}}</p> 62 <h4>trim:清除前后空格</h4> 63 <input type="text" v-model.trim="tel2"> 64 <p>电话号码：{{tel2}}</p> 65 </section> 66 </section>
html：checkbox，radio，input，textarea；【指令：v-model；修饰符：v-model.lazy】
javascript：请通过<script>方式先引入vue.js
1 var vm = new Vue({ 2 el:"#content", 3 data: { 4 //复选框 5 checked:false, 6 checked1:["test"], 7 checkedNames:[], 8 //单选框 9 checked0:"男", 10 sex:"", 11 //文本框 12 userName:"", 13 address:"", 14 //选择框 15 selected:"", 16 //修饰符 17 tel:"", 18 tel1:"", 19 tel2:"" 20 } 21 });
