首页 > 代码库 > vue.js 2的表单控件
vue.js 2的表单控件
静下心，抄一段sample，以后可以快点到这里来抄。。。：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="demo.css" /> </head> <body> <div id="app"> <input type="text" v-model="message" /> <span>Your input is: {{ message }}</span> <p></p> <label><input type="radio" value="male" v-model="gender">男</label> <label><input type="radio" value="female" v-model="gender">女</label> <p>{{gender}}</p> <input type="checkbox" v-model="checked" /> <span> checked: {{checked}}</span> <p></p> <label><input type="checkbox" value="1" v-model="multiChecked">1</label> <label><input type="checkbox" value="2" v-model="multiChecked">2</label> <label><input type="checkbox" value="3" v-model="multiChecked">3</label> <p>multiChecked: {{multiChecked.join(‘|‘)}}</p> <select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span> Selected: {{selected}}</span> <p></p> <select v-model="multiSelected" multiple> <option selected>A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span> MultiSelected: {{multiSelected.join(‘|‘)}}</span> <p></p> <input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b"> <span> checked: {{checked}}</span> <p></p> <input type="radio" v-model="checked" v-bind:value="a"> <span> checked: {{checked}}</span> <p></p> <select v-model="selected"> <option v-bind:value="{number: 123}"> 123</option> </select> <span> Selected: {{selected}}</span> <p></p> <div class="tab" v-bind:class="{‘active‘: active, ‘unactive‘: !active}"> </div> <div v-bind:class="[classA, classB]"></div> <div v-bind:style="alertStyle"></div> </div> <template v-if="yes"> <p>This is 1 dom</p> <p>This is 2 dom</p> <p>This is 3 dom</p> <p>This is 4 dom</p> </template> </body> <script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data: { message: "", gender: "", checked: "", multiChecked: [], selected: "", multiSelected: [], a: "a", b: "b", yes: true, active: true, classA: ‘class-a‘, classB: ‘class-b‘, alertStyle: { color: "red", fontSize: "20px" } } }) </script></html>
vue.js 2的表单控件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。