Vue 3 基础：事件监听

最新推荐文章于 2024-06-21 08:47:39 发布

小公鸡卡哇伊呀~

最新推荐文章于 2024-06-21 08:47:39 发布

阅读量3.1k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/ftell/article/details/121498836

版权

v-on 指令用于添加事件监听器
v-html 解析HTML
v-bind 属性绑定
<tag> {{ a_property}} …</tag> 插值

HTML 中不要放入太多逻辑，否则就是不好的做法。

不带参数的情况下，add可以写成 add(), 也可以写成 add，调用或者指向，Vue 两者语法都接受

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Vue Events</h1>
    </header>
    <section id="events">
      <h2>Events in Action</h2>
      <button v-on:click="add(5)">Add</button>
      <button v-on:click="reduce(10)">Remove</button>
      <p>Result: {{ counter }}</p>
      <input type="text" v-on:input="setName($event,'asdf')" />
      <p>Your Name: {{name}}</p>
    </section>
  </body>
</html>

input 元素最好的监听事件是 input 事件，此事件为 vanilla JS 事件，使用vue指令v-on指定需要监听的事件, 如果需要额外的参数，第一个参数使用 $event.

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
      name: "",
    };
  },
  methods: {
    add(num) {
      this.counter += num;
    },
    reduce(num) {
      this.counter -= num;
    },
    setName(event, l) {
      this.name=event.target.value + " " + l;
    }
  }
});

app.mount('#events');

小公鸡卡哇伊呀~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 3 基础：事件监听

v-on 指令用于添加事件监听器v-html 解析HTMLv-bind 属性绑定<tag> {{ a_property}} …</tag> 插值HTML 中不要放入太多逻辑，否则就是不好的做法。不带参数的情况下，add可以写成 add(), 也可以写成 add，调用或者指向，Vue 两者语法都接受<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"
复制链接

扫一扫