vue常用的修饰符

た入场券 2021-10-18 09:32 295阅读 0赞

v-model修饰符

<template>
      <div id="demo14">
        <p>-----------------模板语法之修饰符----------------</p>
    
        
        <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">
          
          <input v-on:keyup.13="doThis">
          <input type="text" @keyup.enter="enter_click" placeholder="enter_click">
    
          
          <input @keyup.alt.67="doThis">
          
          <div @click.ctrl="doThis">doThis</div>
          
          <button @click.ctrl="doThis">A</button>
    
          
          <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>

https://www.jianshu.com/p/60135bb32ebb  vue常用修饰符

转载于:https://www.cnblogs.com/shy1766IT/p/11056389.html