<!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>

vue表单属性的更多相关文章

  1. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  2. vue 表单校验（二）

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  3. vue表单验证--veevalidate使用教程

    vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...

  4. vue表单验证：vee-validate中文提示

    官方文档:https://baianat.github.io/vee-validate/guide/ vee-validate可用于vue项目中进行表单验证,使用方法在官方API上都可以查到: 使用过 ...

  5. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  6. vue表单选项框

    选项框选的内容在下面显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. 服务器表单字符串转化Vue表单挂在到对应DOM节点

    今天在项目开发中,遇到从后端返回的vue文件(包含template,js,css)的文件,试过用v-html解析文件,渲染到页面,但是无法渲染,后来去查了一堆资料,自己写了一个全局方法来解析这类文件 ...

  8. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  9. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

随机推荐

  1. 《菜鸟程序员成长之路：从技术小白到阿里巴巴Java工程师》

    <菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师> 国庆节快乐!一年一度长度排第二的假期终于来了. 难得有十一长假,作者也想要休息几天啦. 不管你是选择出门玩,还是在公司加班,在学 ...

  2. 正则表达式在Java中使用

    正则表达式 定义 用一组特殊的字符来描述一组字符串的格式 用于验证字符串是否满足格式 不关心字符串的内容是否有效 1. 基本正则表达式所谓正则表达式就是使用一系列预定义的特殊字符来描述一个字符串的格式 ...

  3. 快学Scala 第七课 （类构造函数）

    类 主构造器: class Person (var name: String){ } 主构造参数可以不带val或者var,如果没有被其他方法使用,则不保存为字段. 如果被其他方法使用,则被升格为字段, ...

  4. spring配置文件默认名称及位置，ContextLoaderListener监听器作用

    spring在web.xml中的配置 由于spring需要启动容器才能为其他框架提供服务,而web应用程序的入口是由web服务器控制的,因此无法在main()方法中通过创建ClassPathXmlAp ...

  5. SpringBootSecurity学习（23）前后端分离版之OAuth2.0 其它模式

    密码模式 前面介绍了授权码模式和刷新令牌两种获取最新令牌的方法,下面来看一下其它模式.首先看密码模式,我们默认配置的三种模式中其实就包含密码模式的支持: 因此我们启动项目,直接使用密码模式即可,访问地 ...

  6. 将jar包发布到maven的中央仓库细节整理

    在学习springboot框架的时候,会引入各种各样的starter依赖,照着教程尝试写了个demo-spring-boot-stater,可以理解为一个组件,随引随用 但是只能自己引用,无法共享,于 ...

  7. Mariadb 基于Mycat实现读写分离

    环境:Mariadb主:192.168.200.129 Mariadb从:192.168.200.114 Mycat    :192.168.200.112 (1)      安装jdk,先查看本机是 ...

  8. B-微积分-Sigmoid函数

    目录 Sigmoid函数 一.Sigmoid函数详解 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnbl ...

  9. 利用Helm简化Kubernetes应用部署（2）

    目录 定义Charts  使用Helm部署Demo  Helm常用操作命令  定义Charts 回到之前的“charts”目录,我们依次进行解读并进行简单的修改. Chart.yaml 配置示例: a ...

  10. 在集成环境中修改配置文件php.ini不生效的解决办法

    配置完成之后一定要重启服务,如果重启服务还是不生效. 就去看一下phpinfo(),找到Loaded Configuration File选项,这个才是真正读取的配置文件