静下心，抄一段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>
