Vue表单

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>
时间: 2024-08-29 23:00:31

Vue表单的相关文章

第四节:Vue表单标签和组件的基本用法,父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

vue 表单提交

在vue中,有一个$el 属性. 该属性在created 的阶段还是不可用的,直到 mounted 之后,我们才能获取到 $el 属性. $el是vue实例中 el 属性标识的dom元素. ------------------------------------ vue表单提交,有时候需要提交 文件数据,这时候需要用到 formDate,代码如下 1 let formData = new FormData($(this.$el).find(".import-form")[0]); //

vue表单验证,vee-Validate

1.下载安装 npm install vee-validate --save 2.main.js 添加 //vue表单验证插件 import VeeValidate,{Validator} from 'vee-Validate'; //没有配置过的错误提示默认使用英文显示的, //如果想要用中文显示需要我们手动配置一下 import zh from 'vee-validate/dist/locale/zh_CN';   Validator.localize('zh', zh); //blur 失

vue 表单校验(二)

vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐,因而一直在研究中 表单校验分类 前后端校验 前端校验 后端校验 这种目前一般是结合起来使用,很少单纯前端校验,或者单纯后端校验的 前端检验 数据录入时校验 数据回显时校验 动态创建时校验 数据是否必填时校验 接下来所谈论的校验都是基于前端进行校验,若是后天校验,只是统一校验规则而已,这样前后便可以统

vue表单校验(三)

vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 通过表单提交时,触发校验,未通过的表单会添加is-error,之后滚动到对应的错误位置即可 页面视图 实现逻辑 触发条件 在提交时,若是未通过则开始进行判断,由于是依赖于is-error的class类名,因而需要等form表单错误的元素添加完is-error类名后再进行判断 submitForm1

vue表单控件绑定+自定义组件

vue表单控件绑定 v-model 在表单控件元素上创建双向数据绑定 文本框双向绑定 多选框演示 下拉列表演示 vue自定义组件 组件放在components目录下 组件基本要素:props  $emit 通过import导入自定义组件 制作一个倒计时组件: 1.在conponents目录下,新建一个time.vue 方法写在mouted声明周期函数内,代码如下: 然后在index.vue中使用组件: 我之前组件命名为time,可能与默认什么冲突了,然后报错不让用,所以改名成cyytime 但是

Vue 表单验证插件

verify github:https://github.com/liuyinglong/verifynpm:https://www.npmjs.com/package/vue-verify-plugin install npm install vue-verify-plugin use html <div> <div> <input type="text" placeholder="姓名" v-verify.grow1="u

Vue 表单控件绑定

表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder=&qu

VUE 表单元素双向绑定总结

checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <input type="checkbox" v-model="inputdata"/> <input type="checkbox" v-model="inputdata"/> new Vue({ el:"