查看“Element:输入框”的源代码
←
Element:输入框
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==Input 输入框== 通过鼠标或键盘输入字符 Input 为受控组件,它总会显示 Vue 绑定值。 通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。 不支持 v-model 修饰符 ==基础用法== ===效果图=== [[文件:vue2022072607.png|600px]] ===代码=== <nowiki> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VUE第一个案例-helloWorld</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <style type="text/css"> </style> </head> <body> <div id="app"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name" placeholder="请输入内容"></el-input> </el-form-item> <el-form-item label="活动城市"> <el-input v-model="form.city" placeholder="请输入内容"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">提交</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </div> <script> new Vue({ el: '#app', data() { return { form: { name: '', city: '', } } }, methods: { onSubmit() { console.log('submit!'); console.log(this.form.name); console.log(this.form.city); } } }) </script> </body> </html> </nowiki> ==密码框== 使用show-password属性即可得到一个可切换显示隐藏的密码框 ===效果图=== [[文件:vue2022072608.png|600px]] ===代码=== <nowiki> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VUE第一个案例-helloWorld</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <style type="text/css"> </style> </head> <body> <div id="app"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name" placeholder="请输入内容"></el-input> </el-form-item> <el-form-item label="输入密码"> <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">提交</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </div> <script> new Vue({ el: '#app', data() { return { form: { name: '', password: '', } } }, methods: { onSubmit() { console.log('submit!'); console.log(this.form.name); console.log(this.form.password); } } }) </script> </body> </html> </nowiki>
返回至
Element:输入框
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息