表单、组件

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

表单

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <headnav user='xx'></headnav>

            <indexmain @send='changeChild'></indexmain>

            <indexfooter></indexfooter>

            <headnav :user='username'></headnav>

            <h1>{{childContent}}</h1>

        </div>

        <script src="js/indexComponent.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            Vue.component('headnav',{

                    template:'<div><h1>欢迎{{user}}</h1></div>',

                    props:['user'],

                    data:function(){

                        return {

                            msg:'headnav'

                        }

                    }

            })

            var app = new Vue({

                el:'#app',

                data:{

                    username:'隔壁老王',

                    childContent:''

                },

                methods:{

                    changeChild:function(value){

                        console.log(value)

                        this.childContent = value

                    }

                }

            })

            //组件：要想父组件传递数据给子组件，那么需要使用props

            //如果想要子组件将数据传递给父父组件，那么需要使用自定义事件，$emit(事件名称，事件内容)，进行触发，监听：@事件名称=‘要执行的函数’

        </script>

    </body>

</html>

组件

vue_表单_组件的更多相关文章

  1. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  2. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  3. ccflow_005.请假流程-傻瓜表单-审核组件模式

    ccflow_005.请假流程-傻瓜表单-审核组件模式 ' 用审核组件演示各个流程应用 首先设置节点,填写请假单的 表单方案.选择内置傻瓜表单.我们之前创建的表单就回来了. 可以点击下面的设计傻瓜表单 ...

  4. Form表单验证组件

    Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...

  5. Vue基础语法(样式绑定,事件处理,表单,Vue组件)

    样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  6. meta生成器 —— 表单元素组件

    手写代码? meta(json)需要手写吗?别闹,手写多麻烦呀,我这么懒怎么可能手写,这辈子都别想,所以要弄个工具出来,咱们说干就干. 这个工具,说白了本身就是一个表单,一个meta属性对应一个met ...

  7. form-create 3.0 版本发布，好用的Vue3版本动态表单生成组件

    form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持2个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...

  8. BootstrapBlazor-ValidateForm 表单验证组件

    原文链接:https://www.cnblogs.com/ysmc/p/16082279.html 故名思意,这个组件的作用我就不再多说了,配合 AutoGenerateColumnAttribute ...

  9. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

随机推荐

  1. [微软官网] SQLSERVER 执行页面还原

    执行页面还原 https://docs.microsoft.com/zh-cn/previous-versions/sql/sql-server-2008-r2/ms175168(v=sql.105) ...

  2. jQuery : 有关TypeError: invalid ‘in’ operand obj的错误

    参考 lwx2615 的博客 ,网站:  http://blog.csdn.net/lwx2615/article/details/9668777 由PHP返回一个json数据 $.ajax({ ur ...

  3. 深度学习：卷积神经网络（convolution neural network）

    (一)卷积神经网络 卷积神经网络最早是由Lecun在1998年提出的. 卷积神经网络通畅使用的三个基本概念为: 1.局部视觉域: 2.权值共享: 3.池化操作. 在卷积神经网络中,局部接受域表明输入图 ...

  4. Jquery插件收集【m了慢慢学】

    1. Simple Effects for Drop-Down Lists 一个jQuery插件用于将普通的select控件转成一个带有一些简单扩展效果的下拉列表. 2. X-editable 这个插 ...

  5. P2325 [SCOI2005]王室联邦

    题目描述 “余”人国的国王想重新编制他的国家.他想把他的国家划分成若干个省,每个省都由他们王室联邦的一个成员来管理. 他的国家有n个城市,编号为1..n.一些城市之间有道路相连,任意两个不同的城市之间 ...

  6. python使用SMTP发送qq/sina邮件

    python使用qq邮箱(个人邮箱)发送邮件需开启qq邮箱的SMTP服务 在设置中开启pop3/SMTP服务,返回的密码就是之后代码中登录使用账户密码(在完整代码中标识了出来) 之后出现如下错误 sm ...

  7. linux系统下 git 使用教程

    一.初始化 1.首先安装git软件,安装环境是centos 7.x下的云服务器.使用命令: #yum install git 2.设置用户名和邮箱(必须): # git config --global ...

  8. python中使用%与.format格式化文本

    初学python,看来零零碎碎的格式化文本的方法,总结一下python中格式化文本的方法.使用不当的地欢迎指出谢谢. 1.首先看使用%格式化文本 常见的占位符: 常见的占位符有: %d 整数 %f 浮 ...

  9. 【CF739E】Gosha is hunting（动态规划，凸优化）

    [CF739E]Gosha is hunting(动态规划,凸优化) 题面 洛谷 CF 题解 一个\(O(n^3)\)的\(dp\)很容易写出来. 我们设\(f[i][a][b]\)表示前\(i\)个 ...

  10. BZOJ2802 [Poi2012]Warehouse Store 【贪心】

    题目链接 BZOJ2802 题解 这样的问题通常逆序贪心 每个\(A[i]\)只能用来满足后面的\(B[i]\) 就用当前\(A[i]\)不断提供给最小的\(B[i]\)即可 用一个堆维护 #incl ...