当前位置: 首页 > 编程笔记 >

Vue表单实例代码

段宏毅
2023-03-14
本文向大家介绍Vue表单实例代码,包括了Vue表单实例代码的使用技巧和注意事项,需要的朋友参考一下

什么是 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表单实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍Vue 处理表单input单行文本框的实例代码,包括了Vue 处理表单input单行文本框的实例代码的使用技巧和注意事项,需要的朋友参考一下 用vue监听单行文本框是最最最容易的事。 只需用到 v-model 就能监听。 在 data 里面创建一个 msg 变量,用来存储输入框的输入的内容。 在 input 用 v-model 绑定 msg 。 这时输入框输入的所有内容,都会实时更新

  • 本文向大家介绍Vue表单输入绑定的示例代码,包括了Vue表单输入绑定的示例代码的使用技巧和注意事项,需要的朋友参考一下 基础用法 你可以用v-model指令在表单input,textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但是v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据。 v-model会忽略所有表单元素的

  • 本文向大家介绍Vue from-validate 表单验证的示例代码,包括了Vue from-validate 表单验证的示例代码的使用技巧和注意事项,需要的朋友参考一下 前言 需要进行表单数据验证,原先才用html5来完成验证,但是效果很差,也不够灵活,所以需要进行自定义的表单验证,网上的插件都太过庞大,项目并没有这么多的需求。 那让我们自己来写一个吧! 知识准备 vue的自定义指令 具体可以看

  • 本文向大家介绍vue+vue-validator 表单验证功能的实现代码,包括了vue+vue-validator 表单验证功能的实现代码的使用技巧和注意事项,需要的朋友参考一下 官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 下

  • 本文向大家介绍vue form check 表单验证的实现代码,包括了vue form check 表单验证的实现代码的使用技巧和注意事项,需要的朋友参考一下 vue-form-check  (基于vue的表单验证)具体实现代码如下所述: 安装 引用 调用 Component 补充:vue-form表单验证是否为空值 重点部分: 点击表单的 submit按钮 触发form 部分 @submit=”

  • 本文向大家介绍vue实现简单表格组件实例详解,包括了vue实现简单表格组件实例详解的使用技巧和注意事项,需要的朋友参考一下 本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件。vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面