<!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. 怎样用手机把视频变成GIF表情包？原来那么简单，网友：看完涨知识了

    现如今表情包几乎成了,我们手机聊天的必需品了.不过相比于普通表情包,大家更喜欢用GIF表情包,因为动图表情包不仅更加搞笑,而且能更形象的表达我们的情绪.比较有想法的朋友甚至想自己制作GIF表情包,但是 ...

  2. GStreamer基础教程09 - Appsrc及Appsink

    摘要 在我们前面的文章中,我们的Pipline都是使用GStreamer自带的插件去产生/消费数据.在实际的情况中,我们的数据源可能没有相应的gstreamer插件,但我们又需要将数据发送到GStre ...

  3. java时间格式转换任意格式

    例如:20180918/120023转换成2018-09-18 12:00:23 //时间格式转换 public String getNomalTime(String oldTime){ String ...

  4. 搭建Nodejs环境 创建Express应用

    1. Nodejs Nodejs是一种服务器端js脚本运行环境: Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎 2. Express开发框架 极简的web框架,完全是由路 ...

  5. maven私服 nexus 的安装与使用

    简介 私服不是Maven的核心概念,它仅仅是一种衍生出来的特殊的Maven仓库.通过建立自己的私服,就可以降低中央仓库负荷.节省外网带宽.加速Maven构建.自己部署构建等,从而高效地使用Maven. ...

  6. Yii2 前后台登陆退出分离、登陆验证

    这里用的yii2高级模板, 基本模板的配置文件在一个文件里,方法基本没什么区别, 1.用户表要有两个用户表, 当然一个也行,分开是省得麻烦,既然是分离了就彻底分开, 前台表user,后台表user_b ...

  7. python datetime和time的一些疑惑解答 及 获取上年同期、上月等日期

    关于datetime和time有几个疑惑的 1.datetime.datetime.now()——为什么需要两个datetime才能返回当前时间,同样的time只需要time.localtime() ...

  8. SpringBoot导入jsp依赖始终报错

    先粘出我自己的pom代码: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...

  9. LitePal的存储操作

    传统的存储数据方式   其实最传统的存储数据方式肯定是通过SQL语句拼接字符串来进行存储的,不过这种方式有点过于“传统”了,今天我们在这里就不讨论这种情况.实际上,Android专门提供了一种用于存储 ...

  10. 查询SQL SERVER 数据库版本号脚本语句

    数据库直接执行此语句即可select @@version 示例: Microsoft SQL Server 2014 - 12.0.2000.8 (X64)   Feb 20 2014 20:04:2 ...