<!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. 深度汉化GCompris-qt，免费的幼儿识字软件

    1 需求 因为有个小孩上幼儿园了,想开始教他一些汉语拼音和基本的汉字,但通过一书本和卡片又有些枯燥乏味,于上就上网搜索一些辅助认字的应用,还购买了悟空识字APP,在用的过程中发现他设置了很严格的关卡, ...

  2. 11.Django基础九之中间件

    一 前戏 我们在前面的课程中已经学会了给视图函数加装饰器来判断是用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上 ...

  3. Spring 梳理-容器（container）

    虽然Spring的组件代码是轻量级的,但它的配置却是重量级的.一开始,Spring用XML配置,而且是很多XML配置.Spring 2.5引入了基于注解的组件扫描,这消除了大量针对应用程序自身组件的显 ...

  4. 百度富文本编辑器ueditor添加到pom

    <!-- 百度富文本编辑start --> <dependency> <groupId>com.baidu</groupId> <artifact ...

  5. Linux 远程登录命令telnet

    一.telnet简介: telnet命令通常用来远程登录.telnet程序是基于TELNET协议的远程登录客户端程序.Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准 ...

  6. Scala 学习笔记之集合(5)

    import collection.mutable.Buffer object CollectionDemo6 { def main(args: Array[String]): Unit = { // ...

  7. python程序设计基础（嵩天）第五章课后习题部分答案

    第五章p1515.2:实现isodd()函数,参数为整数,如果参数为奇数,返回true,否则返回false.def isodd(s): x=eval(s) if(x%2==0): return Fal ...

  8. 04、JDBC范例

    范例:JDBC查询 package com.hsp; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...

  9. pycharm导入自己写的包的时候，不能识别模块的解决办法

    今天用写selenium脚本的时候导入自己统计目录下的模块时,出错,明明存在但是报错说模块不存在,找了半天终于找到解决方案,顺便记录一下吧 pycharm不会将当前文件目录自动加入自己的sourse_ ...

  10. java中的Overload和Override

    Overload为重载,它是指我们可以定义一些名称相同的方法,通过定义不同的输入参数来区分这些方法 然后再调用时,就会根据不同的参数样式,来选择合适的方法执行 在使用重载时只能通过不同的参数样式. 例 ...