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开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
随机推荐
- gitlab邮箱服务配置
配置邮箱服务的用途 有合并请求时,邮件通知 账号注册时,邮件验证 修改密码时,通过邮件修改 配置步骤: .开启QQ邮箱的smtp服务(不建议使用163邮箱,发几次之后,就不能发送) 设置-->账 ...
- Caffe使用step by step:r-cnn目标检测代码
深度学习算法火起来之后,基于深度学习各种模型都如雨后春笋一般在各个领域广泛应用. 由于想把深度学习算法应用在在视频目标检测方向,得到一个较好的结果.由于视频数据的复杂性,因此使用深度学习算法在视频中的 ...
- how to know iframe is loaded in js
how to know iframe is loaded in js ??? iframe & HTTPS & CORS https://iframe.xgqfrms.xyz/eapp ...
- double 和 im2double 的区别
double 就是简单地把一个变量类型转换成double型,数值大小不变. 函数im2double将输入换成double类型.如果输入是unit8,unit16或者是二值的logical类型,则函数i ...
- MT【132】倒序相加因式分解
设数列\(\{a_n\}\)的前\(n\)项和\(S_n\)满足\(S_{n+1}=a_2S_n+a_1,\)其中\(a_2\ne 0\)且\(a_2>-1\) 求证:\(S_n\le \dfr ...
- 【BZOJ1864】三色二叉树(动态规划)
[BZOJ1864]三色二叉树(动态规划) 题面 BZOJ 题解 首先把树给构出来. 设\(f[i][0/1]\)表示当前节点\(i\),是否是绿色节点的子树中最大/最小的绿色节点的个数和. 转移很显 ...
- 响应式开发(三)-----Bootstrap框架的安装使用
下载 Bootstrap 可以从http://getbootstrap.com/上下载 Bootstrap 的最新版本. Download Bootstrap:下载 Bootstrap.点击该按钮,您 ...
- (转)Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web mod
背景:在sts中导入web项目,却不能通过sts中的tomcat来加载该服务,并报出如下错误. “Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4 ...
- ubuntu 安装node.js
- mysql 设置默认编码为 utf8
vi /etc/mysql/mysql.conf.d/mysqld.cnf [client] default-character-set=utf8 [mysql] default-character- ...