input输入事件监听_从零单排vue第四课--处理用户输入

最新推荐文章于 2022-07-06 09:35:39 发布

weixin_39679091

最新推荐文章于 2022-07-06 09:35:39 发布

阅读量193

点赞数

文章标签： input输入事件监听 vue获取输入框得内容

前情回顾

上一课，我们学习了三个vue指令：v-if, v-show, v-for。

v-if和v-show的作用是条件性的渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

v-for的作用是循环渲染一块内容，比如对列表进行循环渲染，展示不同的数据。

事件监听器（v-on指令）

v-on指令可以为你添加一个事件监听器，用来与用户进行交互。我们可以使用v-on写一个一个非常简单的点击+1的功能，如下代码：

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="utf-8">
 5        <title>v-on</title>
 6    <script src="vue.js"></script>
 7    </head>
 8    <body>
 9    <div id="app">
10      <span>{{count}}</span>
11      <button v-on:click="handleClick">加1</button>
12    </div>
13      <script>
14        var app = new Vue({
15          el: '#app',
16          data: {
17            count: 0
18          },
19          methods: {
20            handleClick() {
21              this.count++
22            }
23          }
24        })
25      </script>
26    </body>
27</html>

运行结果：

每次点击button，数值加1

代码解析：

代码第11行，button标签内添加了一个v-on:click事件监听器。
在vue实例化对象中，定义了一个data属性，count初始化为0。
在vue实例化对象中，还定义了一个方法，handleClick方法。v-on:click="handleClick"语句就是将事件监听器绑定在该方法中。
handleClick方法中实现了count加1的功能。注意，this的作用就是表示当前的vue实例对象。

表单输入的双向绑定(v-model指令)

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

如下代码：

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="utf-8">
 5        <title>v-on</title>
 6    <script src="vue.js"></script>
 7    </head>
 8    <body>
 9    <div id="app">
10      <span>{{msg}}</span>
11      <input v-model="msg" />
12    </div>
13      <script>
14        var app = new Vue({
15          el: '#app',
16          data: {
17            msg: 0
18          }
19        })
20      </script>
21    </body>
22</html>

运行结果：

刚打开浏览器的时候看到的是0，以及输入框里有个0.
当你在输入框里输入其他字符串的时候，外面的span标签里的内容也跟着变化。
这就叫双向数据绑定。

代码解析：

在input标签内，使用了v-model指令，将输入框绑定在msg中。
msg定义在vue实例化对象的data属性里。
这就实现了用户输入与DOM双向数据绑定，非常简单吧！

weixin_39679091

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input输入事件监听_从零单排vue第四课--处理用户输入

前情回顾上一课，我们学习了三个vue指令：v-if, v-show, v-for。v-if和v-show的作用是条件性的渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。v-for的作用是循环渲染一块内容，比如对列表进行循环渲染，展示不同的数据。事件监听器（v-on指令）v-on指令可以为你添加一个事件监听器，用来与用户进行交互。我们可以使用v-on写一个一个非常简单的点...
复制链接

扫一扫