菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue 测试实例 - 小鸟启蒙(facesoho.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>单个复选框:</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label><p>多个复选框:</p> <input type="checkbox" id="facesoho" value="facesoho" v-model="checkedNames"> <label for="facesoho">执法如山,守身如玉,爱民如子,去蠹如仇。</label><hr> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">平生不会相思,才会相思,便害相思。</label><hr> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">结发为夫妻,恩爱两不疑。 </label><hr> <span>选择的值为:{{ checkedNames }}</span> </div><script> new Vue({ el:'#app', data:{ checked :false, checkedNames:[] } }) </script> </body> </html>
运行结果