<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; height: 300px; margin: 0 auto; background: skyblue; } </style> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <h2>输入框</h2> <input type="text" v-model='inputText' name="" id="" value="" /> <p>{{inputText}}</p> <hr /> <h2>单选框</h2> <input type="radio" v-model='sex' name="sex" id="" value="男" /> <input type="radio" v-model='sex' name="sex" id="" value="女" /> <p>{{sex}}</p> <hr /> <h2>复选框</h2> <input type="checkbox" v-model='fx' name="man" id="" value="男" /> <input type="checkbox" v-model='fx' name="girl" id="" value="女" /> <p>{{fx}}</p> <hr /> <h2>选项</h2> <select name="city" v-model='city'> <option value="广州">广州</option> <option value="深圳">深圳</option> <option value="上海">上海</option> </select> <p>{{city}}</p> <hr /> <textarea v-model='longtext' name="txt" rows="" cols=""></textarea> <p>{{longtext}}</p> </div> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ inputText:'', sex:'', fx:[], city:'', longtext:'123' }, compute:{ } methods:{ } }) </script> </body> </html>