vue中input标签的使用

最新推荐文章于 2024-04-08 17:49:09 发布

和世界不一样，那就不一样！

最新推荐文章于 2024-04-08 17:49:09 发布

阅读量2.8k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44834981/article/details/120561227

版权

VUE 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

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">
      <input
        type="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可以获得输入框中的值；

和世界不一样，那就不一样！

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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：帮助用户填写输入字段的提示
复制链接

扫一扫