Vue表单实例代码

时间：2021-05-26

什么是 Vue.js？

Vue.js 是用于构建交互式的 Web 界面的库。

Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。

Vue.js 特点

简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。

数据驱动： 自动追踪依赖的模板表达式和计算属性。

组件化： 用解耦、可复用的组件来构造界面。

轻量： ~24kb min+gzip，无依赖。

快速： 精确有效的异步批量 DOM 更新。

模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson11

一 vue表单

实在是太简单了,直接来个例子

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Vue表单</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div class="test"><!--输入框--><input type="text" v-model="msg"> <br /><!--单选框--><input id="mycb1" type="radio" v-model="choose1"><label for="mycb1">{{choose1}}</label><!--复选框--><input id="mycb2" type="checkbox" v-model="choose2"><label for="mycb2">{{choose2}}</label><!--Select--><select v-model="selected"><option>A</option><option>B</option><option>C</option></select><span>选中: {{ selected }}</span></div><script type="text/javascript">var vm = new Vue({el: ".test",data: {msg: '我是文本',choose1: false,choose2: false,selected:''}})</script></body></html>

以上所述是小编给大家介绍的Vue表单实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章