当前位置：首页 > news >正文

vue常用的修饰符

news 来源：原创 2024/5/18 18:20:20

v-model修饰符

<template>
  <div id="demo14">
    <p>-----------------模板语法之修饰符----------------</p>

    <!-- .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault(),取消事件的默认动作。 -->
    <form v-on:submit.prevent="onSubmit">
      <input type="submit" value="submit">
    </form>

    <form v-on:submit="onSubmit">
      <input type="submit" value="submit2">
    </form>

    <!-- 当在文本框输入内容，并且光标焦点没有离开文本框时，属性值没有实时发生变化 -->
    <h2>v-model.lazy</h2>
    <input type="text" v-model.lazy="input_lazy">

    <h2>v-model.number</h2>
    <input type="text" v-model.number="input_number">

    <h2>v-model.trim</h2>
    <input type="text" v-model.trim="input_trim">
  </div>
</template>
 

<script>
export default {
  data() {
    return {
      url: "https://www.baidu.com",
      input_lazy: "",
      input_number: "",
      input_trim: ""
    };
  },
  methods: {
    onSubmit: function() {
      console.log(this.url);
    }
  }
};
</script>

事件处理修饰符

<template>
  <section>
    <div id="demo23-1">
      <p>-----------------事件处理之修饰符---------------------</p>
      <!-- 阻止单击事件继续传播 ,将上面两个方法绑定到一组具有父子关系的元素上-->
      <div @click="div_click">
        <a v-on:click.stop="stop_click">click.stop</a>
      </div>
      <div @click="div_click">
        <a v-on:click="stop_click">click without stop</a>
      </div>

      <!-- 提交事件不再重载页面 阻止表单提交并刷新当前页面的默认行为。-->
      <form v-on:submit.prevent="form_submit">
        <input type="submit" value="submit">
      </form>

      <!-- 修饰符可以串联 -->
      <a v-on:click.stop.prevent="doThis">串联</a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
    </div>
    <p>------------------------------</p>
    <div id="demo23-2" v-on:click.capture="doThis">test capture</div>
    <p>------------------------------</p>
    <!-- 该指令只当事件是从事件绑定的元素本身触发时才触发回调 -->
    <div id="demo23-3" v-on:click.self="div_click" style="display:inline-block; width:200px; background-color:red;">
      <button type="button" @click="stop_click">Button</button>
    </div>
    <button type="button" @click.once="once_click">Onceclick</button>
    <p>------------------------------</p>
    <div id="demo24-4">
      <!-- Enter -->
      <input v-on:keyup.13="doThis">
      <input type="text" @keyup.enter="enter_click" placeholder="enter_click">

      <!-- Alt + C -->
      <input @keyup.alt.67="doThis">
      <!-- Ctrl + Click -->
      <div @click.ctrl="doThis">doThis</div>
      <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
      <button @click.ctrl="doThis">A</button>

      <!-- 有且只有 Ctrl 被按下的时候才触发 -->
      <button @click.ctrl.exact="doThis">B</button>

      <!-- 没有任何系统修饰符被按下的时候才触发 -->
      <button @click.exact="doThis">C</button>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      name: "Vue.js"
    };
  },
  methods: {
    doThis: function() {
      alert("Hello " + name + " ！");
    },
    div_click() {
      console.log("div click");
    },
    stop_click() {
      console.log("stop click");
    },
    form_submit() {
      console.log("form submit");
    },
    enter_click() {
      console.log("enter click");
    },
     once_click() {
      console.log("once click");
    }
  }
};
</script>