vue_表单_组件
表单、组件
<!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_表单_组件的更多相关文章
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- Vue基础-自定义事件的表单输入组件、自定义组件的 v-model
Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...
- ccflow_005.请假流程-傻瓜表单-审核组件模式
ccflow_005.请假流程-傻瓜表单-审核组件模式 ' 用审核组件演示各个流程应用 首先设置节点,填写请假单的 表单方案.选择内置傻瓜表单.我们之前创建的表单就回来了. 可以点击下面的设计傻瓜表单 ...
- Form表单验证组件
Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...
- Vue基础语法(样式绑定,事件处理,表单,Vue组件)
样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- meta生成器 —— 表单元素组件
手写代码? meta(json)需要手写吗?别闹,手写多麻烦呀,我这么懒怎么可能手写,这辈子都别想,所以要弄个工具出来,咱们说干就干. 这个工具,说白了本身就是一个表单,一个meta属性对应一个met ...
- form-create 3.0 版本发布，好用的Vue3版本动态表单生成组件
form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持2个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...
- BootstrapBlazor-ValidateForm 表单验证组件
原文链接:https://www.cnblogs.com/ysmc/p/16082279.html 故名思意,这个组件的作用我就不再多说了,配合 AutoGenerateColumnAttribute ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
随机推荐
- vmdk->vhdx
https://cloudbase.it/qemu-img-windows/ Usage examplesConvert a QCOW2, RAW, VMDK or VDI image to VHDX ...
- java 常见的异常大集合
算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastException 数组负下标异常:NegativeAr ...
- c# 方法参数 params 的试用
//添加方法 public void test(params string[] messages) { } //调用方法 test("aaa","bbb",&q ...
- ibatis解决sql注入问题
原文: http://blog.csdn.net/scorpio3k/article/details/7610973 对于ibaits参数引用可以使用#和$两种写法,其中#写法会采用预编译方式,将转义 ...
- 点击--》java9 新特性 详解
引言: 点击-->java9 新特性 详解 点击-->java8 新特性 详解 正题: 1.局部变量var 将前端思想var关键字引入java后段,自动检测所属于类型,一种情况除外,不能为 ...
- 解题：JSOI 2016 最佳团体
题面 0/1分数规划+树形背包检查 要求$\frac{\sum P_i}{\sum S_i}的最大值,$按照0/1分数规划的做法,二分一个mid之后把式子化成$\sum P_i=\sum S_i*mi ...
- [转]Asp.Net MVC使用HtmlHelper渲染,并传递FormCollection参数的陷阱
http://www.cnblogs.com/errorif/archive/2012/02/13/2349902.html 在Asp.Net MVC 1.0编程中,我们经常遇见这样的场景,在新建一个 ...
- ECharts.js 简单示例
ECharts.js学习(一) 简单入门 EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Vi ...
- 队列，event,multiprocess
队列:queue queue is especially useful in threaded programming when information must be exchanged safel ...
- Python 装饰器（进阶篇）
装饰器是什么呢? 我们先来打一个比方,我写了一个python的插件,提供给用户使用,但是在使用的过程中我添加了一些功能,可是又不希望用户改变调用的方式,那么该怎么办呢? 这个时候就用到了装饰器.装饰器 ...