vue中input标签的使用

vue中input标签的使用
普通input标签

<input type="text" value="" placeholder="placeholder" name="name" @input="print($event.target.value)">

type：规定input元素的类型；
text: 标识文本输入框
submit：标识提交按钮
checkbox 多选框
radio 是单选框
value：规定input框中的值
palceholder：帮助用户填写输入字段的提示文本
name: 用于对提交到服务器后的表单数据进行标识；
在客户端通过javascript引用表单数据；

<body><div id="app"><inputtype="text"value=""placeholder="placeholder"name="name"@input="print($event.target.value)"/></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {},methods: {print(e) {console.log(e);},},});</script></body>

多了@input事件，监听输入框中数值的变化
$event.target.value可以获得输入框中的值；

vue中input标签的使用相关推荐

在vue中input标签手机号码进行正则验证
今天遇到一个问题就是在vue中给input进行正则手机号码的验证下面是今天的代码,用js进行书写,没有用elementUI,代码如下: <div cla ...
vue中img标签onerror事件
vue中img标签onerror事件使用:onerror去绑定事件该方法能正确处理onerror事件,并防止闪图 <img type="image/x-icon" :sr ...
HTML5/HTML中input标签用法解读
HTML5/HTML中<input>标签用法解读 OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中<input>标签的用法,,, ,emmm图文并茂哦! 喜欢博主的粉 ...
Vue中自定义标签及其使用
Vue中自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果问题我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的 ...
vue中img标签404错误处理事件onerror
以下为图片链接失效的情况若服务上的图片直接在浏览器上可以打开,但是在img上报404错误处理方法在index.html中添加代码如下 <meta name="referrer&qu ...
vue 中 input事件
vue 中 input事件 input事件的使用 <div :id="inputId" :class="['textarea_content_right']&quo ...
vue中img标签引用图片地址变量不显示，引入失败问题
vue中img标签,src的地址赋值给vue属性不显示 ,如图修改后写法,加上require即可原文 https://blog.csdn.net/Chris__wang/article/detai ...
Easyui中input标签设置只读
Easyui中input标签设置只读直接在input标签中设置属性:readonly="readonly". 具体例子: <input class="easyui ...
Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架一.input标签常用属性表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...

vue中input标签的使用

vue中input标签的使用相关推荐

最新文章

热门文章