Vue 3 基础：事件监听

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

小公鸡卡哇伊呀~

3263人浏览 · 2021-11-23 17:52:20

小公鸡卡哇伊呀~ · 2021-11-23 17:52:20 发布

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');

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^